首页 未分类

做完这个以后直接拿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();
    } //测试
}



文章评论

目录