• 原生js计时器和时钟

    各种小demo 我后续会上传到，样式内容很少 以js为主，代码如下：

    goblinModeL · GitHubgoblinModeL has 2 repositories available. Follow their code on GitHub.icon-default.png?t=N7T8https://github.com/goblinModeL计时器起步延迟一秒可自行修改初始时间为1或者，添加变量 使得首次点击立即执行，下方代码暂时未添加，如有需要可评论 我后续加

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>时间和计时器title>
    6. head>
    7. <body>
    8. <div style="width: 200px;height: 200px;display: inline-block">
    9.     <h1>时间h1>
    10.     <h1 class="time">h1>
    11.     <button onclick="clearInterval(count)">停止button>
    12.     <button onclick="count=setInterval( ()=>{timer()},1000)">重新button>
    13. div>
    14. <div style="width: 400px;height: 200px;display: inline-block;margin-left: 200px">
    15.     <h1>计时器h1>
    16.     <h1 class="time">00:00:00h1>
    17.     <button onclick="if (begin===false) {  counts = setInterval(() => {  timer2() }, 1000)}">开始button>
    18.     <button onclick="suspend=!suspend">暂停button>
    19.     <button onclick="clears()">清除button>
    20. div>
    21. body>
    22. <script type="text/javascript">
    23.     const date = new Date();
    24.     let H = 0, M = 0;
    25.     S = 0;
    26.     let suspend=false
    27.     let begin=false
    28. let counts
    29.     //简易时间
    30.     const timer = () => {
    31.         const date = new Date();
    32.  
    33.         const Hours = date.getHours().toString().length > 1 ? date.getHours() : '0' + date.getHours(),
    34.             minutes = date.getMinutes().toString().length > 1 ? date.getMinutes() : '0' + date.getMinutes(),
    35.             Seconds = date.getSeconds().toString().length > 1 ? date.getSeconds() : '0' + date.getSeconds();
    36.         document.getElementsByClassName('time')[0].innerText =
    37.             Hours + ":" + minutes + ":" + Seconds;
    38.  
    39.     }
    40.     let count = setInterval(() => {
    41.         timer()
    42.     }, 1000)
    43.     //计时器
    44.     const timer2 = () => {
    45.              begin=true;
    46.             suspend == false ? ++S : S;
    47.             S = S.toString().length > 1 ? S : '0' + S;
    48.             M = S == 60 ? (++M , S = 0) : M
    49.             H = M == 60 ? (++H, M = 0) : H
    50.             S = S.toString().length > 1 ? S : '0' + S;
    51.             M = M.toString().length > 1 ? M : '0' + M;
    52.             H = H.toString().length > 1 ? H : '0' + H;
    53.             document.getElementsByClassName('time')[1].innerText =
    54.                 H + ":" + M + ":" + S;
    55.  
    56.     }
    57.  
    58. const clears=()=>{
    59.      H = 0, M = 0;S = 0;
    60.     clearInterval(counts);
    61.     begin=false;
    62.     document.getElementsByClassName('time')[1].innerText ="00:00:00";
    63.  
    64. }
    65.  
    66. script>
    67. html>

    如有bug 多谢反馈！ 

  • 相关阅读:
    常用的三角函数公式
    【Spring Boot】初识Thymeleaf
    GPT-4成Nature审稿人，超 50% 结果和人类评审一致
    华为23年9月笔试原题，巨详细题解，附有LeetCode测试链接
    代码签名证书以及如何申请
    漏洞修复-SSH版本信息可被获取漏洞
    嵌入式工程师成长之路
    LeetCode题练习与总结：组合-77
    如何选择正确的哈希算法？
    零基础学习ESP8266
  • 原文地址：https://blog.csdn.net/qq_52807600/article/details/132626443