【Web】Web-API(No.69)下课倒计时-自动播放下课铃声

下课倒计时-自动播放下课铃声

在这里插入图片描述
需要素材点击图片联系我或私信、评论
【Web】Web-API(No.69)下课倒计时-自动播放下课铃声_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时title>
    <script src="common.js">script>
    <script>
        window.onload = function () {
      
            function clock() {
      
                my$("audio").autostart = false;
                //1、获取当前时间
                var dt = new Date();
                //2、获取截止时间
                var endTime = new Date("2019/09/09 09:09:09");
                //3、都转换成毫秒
                var now = dt.getTime();
                var end = endTime.getTime();
                //4、求差
                var time = end - now;
                //5、毫秒转化为秒
                var seconds = time / 1000;
                if (seconds > 0) {
      
                    //秒转化为时分秒
                    var h = Math.floor(seconds / 3600);
                    var m = Math.floor(seconds %3600 / 60);
                    var s = Math.floor(seconds % 60);
                    //补位
                    function bu(i){
      
                        return i < 10 ? "0" + i : i;
                    }
                    my$("clock").innerText = bu(h) + " :" + bu(m) + " :" + bu(s);
                }else{
      
                    my$("clock").innerText = "下课啦!";
                    my$("audio").autostart = true;
                    clearInterval(t);
                }
            }
            clock();
            var t = setInterval(clock,1000);
        }
    script>
    <style>
        body {
      
            background-color: #000000;
        }
        
        h1 {
      
            text-align: center;
            font-size: 200px;
            margin: 150px auto;
            color: red;
        }
    style>
head>
<body>
<h1 id="clock">h1>

<audio id="audio" autoplay="autoplay" readyState>
    <source src="纯音乐 - 下课铃.mp3">
audio>
body>
html>

你可能感兴趣的:(Web-API,Web,API)