原生js计时器和时钟

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

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间和计时器title>
head>
<body>
<div style="width: 200px;height: 200px;display: inline-block">
    <h1>时间h1>
    <h1 class="time">h1>
    <button onclick="clearInterval(count)">停止button>
    <button onclick="count=setInterval( ()=>{timer()},1000)">重新button>
div>
<div style="width: 400px;height: 200px;display: inline-block;margin-left: 200px">
    <h1>计时器h1>
    <h1 class="time">00:00:00h1>
    <button onclick="if (begin===false) {  counts = setInterval(() => {  timer2() }, 1000)}">开始button>
    <button onclick="suspend=!suspend">暂停button>
    <button onclick="clears()">清除button>
div>
body>
<script type="text/javascript">
    const date = new Date();
    let H = 0, M = 0;
    S = 0;
    let suspend=false
    let begin=false
let counts
    //简易时间
    const timer = () => {
        const date = new Date();
 
        const Hours = date.getHours().toString().length > 1 ? date.getHours() : '0' + date.getHours(),
            minutes = date.getMinutes().toString().length > 1 ? date.getMinutes() : '0' + date.getMinutes(),
            Seconds = date.getSeconds().toString().length > 1 ? date.getSeconds() : '0' + date.getSeconds();
        document.getElementsByClassName('time')[0].innerText =
            Hours + ":" + minutes + ":" + Seconds;
 
    }
    let count = setInterval(() => {
        timer()
    }, 1000)
    //计时器
    const timer2 = () => {
             begin=true;
            suspend == false ? ++S : S;
            S = S.toString().length > 1 ? S : '0' + S;
            M = S == 60 ? (++M , S = 0) : M
            H = M == 60 ? (++H, M = 0) : H
            S = S.toString().length > 1 ? S : '0' + S;
            M = M.toString().length > 1 ? M : '0' + M;
            H = H.toString().length > 1 ? H : '0' + H;
            document.getElementsByClassName('time')[1].innerText =
                H + ":" + M + ":" + S;
 
    }
 
const clears=()=>{
     H = 0, M = 0;S = 0;
    clearInterval(counts);
    begin=false;
    document.getElementsByClassName('time')[1].innerText ="00:00:00";
 
}
 
script>
html>

如有bug 多谢反馈！

相关阅读:
大二Web课程设计：HTML+CSS学校静态网页设计——南京师范大学泰州学院（11页）
pycharm操作git、前后端项目上传到gitee
100天精通Andriod逆向——第1天：ADB原理及其常用命令
朝着“强国建设民族复兴”之路奋勇前行
关于ABAP 中的标题行（又叫表头行或者 header line）的理解
kafka安装
声学相关词汇
vue之浏览器存储方法封装实例
红日ATT＆CK系列靶场（一）
Web服务器的搭建

原文地址：https://blog.csdn.net/qq_52807600/article/details/132626443