上课计时完工(可定时启动)

meowrain

发布于 2021-04-22 15:35:33

1.6K00

代码可运行

文章被收录于专栏：MeowRain的博客MeowRain的博客

运行总次数：0

代码可运行

做完这个以后直接拿electro包装成exe文件就可以直接在班里电脑使用了

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
      #container button {
        border: none;
        margin: 20px auto;
        padding: 5px 30px;
        font-size: 20px;
        outline: none;
        border-radius: 5px;
      }
      #container #time {
        font-size: 46px;
        color: #7FFFD4;
        text-align: center;
        margin: 0 auto;
      }
      .saying {
        margin-right: 50px;
        font-size: 20px;
        text-align: center;
      }
    </style>
    <script type="text/javascript" src="timer.js"></script>
    <script type="text/javascript" src="timer2.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="time">
        <span class="saying">
          <script language="javaScript" >
            now = new Date(),hour = now.getHours()
            if (hour<6){document.write(" 早上好！同学！")}
            else if (hour<9){document.write("早上好，同学们！")}
            else if (hour<12){document.write("上午好，同学们!")}
            else if (hour<14){document.write("中午好，同学们！")}
            else if (hour<17){document.write("下午好！同学们！")}
            else if (hour<19){document.write("傍晚好！同学们！")}
            else if (hour<22){document.write("晚上好！同学们！")}
            else {document.write("夜深了，学习注意眼睛哦！")}
            </script>
            </span>
            <br>
        <strong><span id="min">00</span>&nbsp;:
        <span id="sec">00</span>　
      </strong>　
      </div>
      <div class="buttons">
        <button id="btn"  class="btn btn-success">开始计时</button>
        <button id="reset" class="btn btn-danger">复位</button>　　
      </div>
    </div>
  </body>
</html>

js

timer.js用来开启⏲ timer2.js用来自定义时间启动

timer.js

var i = 0; //使用i来充当秒数统计setinterval方法的刷新次数
var timer = null; //接收setinterval的返回值，以便于暂停和重置功能的实现
var isRunning = false; //来定义开始按钮和定时器的状态，默认定时器不启动，button文字为开始

function doubleNumber(num) {
  //计时器辅助功能，因为计时器在小于10的时候只显示一位数，例如 1 ，2。。。
  //而我们习惯的方式为01,02.。。，所以定义一个函数方法来优化用户体验
  if (num < 10) {
    return "0" + num;
  } else {
    return num;
  }
}

window.onload = function () {
  //使用window.onload = function()来让页面所有元素加载完毕之后才执行js代码，可以优化用户体验应对网速较慢的情况
  function funcStart() {
    //这是计时器的开始功能
    timer = setInterval(function () {
      //使用timer来接收setinterval的值，setinterval是js内置的计时器功能，执行过程为，。
      //第一个参数为函数，第二个为毫秒数，经过指定的毫秒数来执行一次传入的函数
      i++; //这是计时器秒数分钟数和小时的基准“i”
      document.getElementById("sec").innerHTML = doubleNumber(i % 60); //秒数等于i%60，然后被doubleNumber方法应用，也就是上面所定义的的辅助功能
      document.getElementById("min").innerHTML = doubleNumber(parseInt(i / 60) % 60);
      document.getElementById("hour").innerHTML = doubleNumber(parseInt(i / 3600) % 60);
    }, 1000); //每一千毫秒 = 一秒 刷新一次
  }
  function funcPause() {
    clearInterval(timer); //使用js内置功能暂停计时器
  }
  document.getElementById("reset").onclick = function () {
    i = 0; //重置功能，将“i”设为0，然后暂停计时器，把时分秒标签内容归为字符串类型的‘00’；
    clearInterval(timer);
    document.getElementById("sec").innerHTML = "00";
    document.getElementById("min").innerHTML = "00";
    document.getElementById("hour").innerHTML = "00";
    document.getElementById("btn").innerHTML = "开始计时"; //重置之后将btn的标签内容设置为“开始”
  };

  document.getElementById("btn").onclick = function () {
    //当id为btn的按钮被点击时，执行以下函数
    if (!isRunning) {
      document.getElementById("btn").className = "btn btn-info";
      document.getElementById("btn").innerHTML = "暂停计时"; //设置btn标签内容为暂停
      funcStart(); //  isRunning默认为false  那么isRunning的否就是true，就是代表当前计时器并没有运行，然后执行funcStart()功能
      isRunning = true; //设置 isRunning = true，然后当再次点击btn按钮时则运行else函数，因为此时isRunning的否就是false了
    } else {
      document.getElementById("btn").className = "btn btn-success";
      document.getElementById("btn").innerHTML = "开始计时"; //设置btn标签内容为开始
      funcPause(); //　　否则就执行funcPause()函数功能
      isRunning = false; //设置 isRunning =false，然后当再次点击btn按钮时则会运行if函数，因为此时isRunning的否就是true了
    }
  };
};

timer2.js

var int=self.setInterval("first()",1000)
function first(){
    date = new Date();
    hour = date.getHours();
    minute = date.getMinutes();
    second = date.getSeconds();
    console.log('当前时间' + hour + '时' + minute + '分' + second + '秒')
    if(hour-7==0&&minute-50==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-8==0&&minute-40==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-9==0&&minute-45==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-10==0&&minute-35==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-11==0&&minute-20==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-14==0&&minute-25==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-15==0&&minute-10==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-16==0&&minute-10==0&&second==0){
        document.getElementById("btn").click();
    }
    if((hour-17==0)&&minute-45==0&&second==0){
        document.getElementById("btn").click();
    }   
    if((hour-18==0)&&minute-30==0&&second==0){
        document.getElementById("btn").click();
    }
    if((hour-19==0)&&minute-45==0&&second==0){
        document.getElementById("btn").click();
    }
    if((hour-20==0)&&minute-30==0&&second==0){
        document.getElementById("btn").click();
    }
    if((hour-21==0)&&minute-20==0&&second==0){
        document.getElementById("btn").click();
    }
    if(hour-23==0&&minute-09==0&&second==30){
        document.getElementById("btn").click();
    } //测试
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年03月18日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度

上课计时完工(可定时启动)

上课计时完工(可定时启动)

HTML

js

timer.js

timer2.js

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐