setTimeout和setIntval

原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 时间显示区域 -->
    <span id="seconds_content">0</span>
    
    <!-- 开始按钮 -->
    <button type="button" id="start" name="button">start</button>
    <!-- 结束按钮 -->
    <button type="button" id="stop" name="button">stop</button>
</body>
<script>
    
   // 解决点击加快问题
    // (function () {
    //         var seconds_content = document.getElementById("seconds_content");
    //         var start_btn = document.getElementById("start");
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         function setTimer() {
    //            time_count = setInterval(() => {
    //                count++;
    //                seconds_content.innerHTML = count;
    //            }, 1000);
    //         }

    //         start_btn.addEventListener("click",  () =>{
    //                 count = seconds_content.innerHTML;
    //                 clearInterval(time_count);
    //                 setTimer();
    //         });

    //         stop_btn.addEventListener("click", () => {
    //             clearTimeout(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })()

    //  (function () {
    //         var seconds_content = document.getElementById("seconds_content");
    //         var start_btn = document.getElementById("start");
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         function intervalLike() {
    //            time_count = setTimeout(() => {
    //                 seconds_content.innerHTML = count;
    //                 count++;
    //                 intervalLike();
    //             }, 1000);
    //         }

    //         start_btn.addEventListener("click",  () =>{
    //            intervalLike();
    //         });

    //         stop_btn.addEventListener("click", () => {
    //             clearTimeout(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })()
    // (function () {
    //         var seconds_content =  document.getElementById("seconds_content");
    //         var start_btn = document.getElementById("start");
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         start_btn.addEventListener("click",function () {
    //             seconds_content.innerHTML = count;
    //             time_count = setInterval(() => {
    //                 count++;
    //                 seconds_content.innerHTML = count;
    //             }, 1000);
    //         });

    //         stop_btn.addEventListener("click",()=>{
    //             clearInterval(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })()
    // (function () {
    //         // 显示时间
    //         var seconds_content = document.getElementById("seconds_content");
    //         // 开始按钮【点击开始计时】
    //         var start_btn = document.getElementById("start");
    //         // 停止按钮【点击停止计时】
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         // 给开始按钮添加点击事件,点击按钮,开始计时
    //         start_btn.addEventListener("click", function (event) {
    //             seconds_content.innerHTML = count;
    //             time_count = setInterval(function () {
    //                 count++;
    //                 seconds_content.innerHTML = count;
    //             }, 1000);
    //         });

    //         // 给停止按钮添加事件,点击按钮,停止计时
    //         stop_btn.addEventListener("click", function (event) {
    //             clearInterval(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })();
    // (function () {
    //         // 显示时间
    //         var seconds_content = document.getElementById("seconds_content");
    //         // 开始按钮【点击开始计时】
    //         var start_btn = document.getElementById("start");
    //         // 停止按钮【点击停止计时】
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         function intervalLike() {
    //             time_count = setTimeout(function () {
    //                 count++;
    //                 seconds_content.innerHTML = count;
    //                 // 循环调用自身,达到和setInterval一样的效果
    //                 intervalLike();
    //             }, 1000);
    //         }

    //         // 给开始按钮添加点击事件,点击按钮,开始计时
    //         start_btn.addEventListener("click", function (event) {
    //             intervalLike();
    //         });

    //         // 给停止按钮添加事件,点击按钮,停止计时
    //         stop_btn.addEventListener("click", function (event) {
    //             clearInterval(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })();
    
</script>
</html>

你可能感兴趣的:(js,css)