烛未 2019-01-16 14:43 采纳率: 100%
浏览 232
已采纳

像这个点击开启通道的时候

图片说明

  1. 下面的红色小字默认是不显示的 , 只有点击开启通道才会有倒计时 , 并且关闭通道取消渲染
  2. 点击关闭通道的时候会立刻取消倒计时

这个思考了很久有点无从下手的感觉 , 还是请专业大佬出手吧

<li>
                        <div class="p_t"><img src="../static/imagess/1-1.png" th:src="@{/imagess//1-1.png}"/></div>
                        <div class="p_m"><button id="start_aisle" onclick="startAisle();">开启通道</button></div>
                        <p class="p_b text-red" >通道已开启，将在<span>70</span>秒后自动关闭</p>
                    </li>
                    <li>
                        <div class="p_t"><img src="../static/imagess/2-1.png" th:src="@{/imagess//2-1.png}"/></div>
                        <div class="p_m">手动打开话筒</div>
                        <p class="p_b"></p>
                    </li>
                    <li>
                        <div class="p_t"><img src="../static/imagess/3-1.png" th:src="@{/imagess//3-1.png}"/></div>
                        <div class="p_m"><button class="active" id="close_aisle"  onclick="alert('点击事件！')">关闭通道</button></div>
                        <p class="p_b text-green">通道已关闭！</p>
                    </li>
                    <li>
                        <div class="p_t"><img src="../static/imagess/4-1.png" th:src="@{/imagess//4-1.png}"/></div>
                        <div class="p_m">手动关闭话筒</div>
                        <p class="p_b"></p>
                    </li>
  • 写回答

3条回答 默认 最新

  • 天际的海浪 2019-01-16 15:52
    关注
    <!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
                        <div class="p_t"><img src="../static/imagess/1-1.png" th:src="@{/imagess//1-1.png}"/></div>
                        <div class="p_m"><button type="button" id="start_aisle" onclick="startAisle();">开启通道</button></div>
                        <p class="p_b text-red" style="display: none;" >通道已开启，将在<span>70</span>秒后自动关闭</p>
                    </li>
                    <li>
                        <div class="p_t"><img src="../static/imagess/2-1.png" th:src="@{/imagess//2-1.png}"/></div>
                        <div class="p_m">手动打开话筒</div>
                        <p class="p_b"></p>
                    </li>
                    <li>
                        <div class="p_t"><img src="../static/imagess/3-1.png" th:src="@{/imagess//3-1.png}"/></div>
                        <div class="p_m"><button type="button" class="active" id="close_aisle"  onclick="clearAisle()">关闭通道</button></div>
                        <p class="p_b text-green">通道已关闭！</p>
                    </li>
                    <li>
                        <div class="p_t"><img src="../static/imagess/4-1.png" th:src="@{/imagess//4-1.png}"/></div>
                        <div class="p_m">手动关闭话筒</div>
                        <p class="p_b"></p>
                    </li>
</ul>
<script>
var time = 70;
var ts;
function startAisle() {
    $(".p_b.text-red").show();
    $(".p_b.text-green").hide();
    clearTimeout(ts);
    ;(function loop() {
        $(".p_b.text-red span").text(time--);
        if (time>=0) {
            ts = setTimeout(loop, 1000);
        } else {
            clearAisle();
        }
    })();
}
function clearAisle() {
    $(".p_b.text-red").hide();
    $(".p_b.text-green").show();
    clearTimeout(ts);
    time = 70;
}
</script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境