SpringApplication 分库查询 双重检验锁 swift rest kubernetes pdo ldap jmeter性能测试视频 mysql倒序 kb转mb 多线程实现方式 matlab自然对数 ssr链接解析 python教学 郑州普通话 python抛异常 java类与对象 java覆盖 java的包 java函数 javarandom java安装教程 java怎么输出数组 linux入门基础 心理学与生活下载 电子书之家 高效能人士的七个习惯下载 java分布式开发 Ext2Fsd 万能低格工具 在线pr序列设置 图片生成网址 maya2016教程 思源字体 bz2 流程图工具 pro换肤 deallocate 服务器之家
当前位置: 首页 > 学习教程  > 编程语言

前端基础 - 案例(三) 报时器

2020/11/24 9:34:31 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

实现一个报时器&#xff0c;例如6:00-12&#xff1a;00显示早上好&#xff1b; 12:00-18:00显示下午好&#xff1b;18:00-6:00显示晚上好<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport…

实现一个报时器,例如6:00-12:00显示早上好; 12:00-18:00显示下午好;18:00-6:00显示晚上好

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实现报时器</title>
    <style>
        .box {
            overflow: hidden;
            width: 619px;
            height: 400px;
            background-color: #49B5AA;
            margin: 80px auto;
        }
        
        .content {
            overflow: hidden;
            width: 555px;
            height: 318px;
            background-color: #ffffff;
            margin: 40px auto;
            border-radius: 20px;
        }
        
        h4 {
            width: 272px;
            height: 26px;
            margin: 0 auto;
            line-height: 26px;
            text-align: center;
            margin-top: 100px;
            font-size: 22px;
        }
        
        ul {
            width: 417px;
            height: 77px;
            margin-top: 50px;
            margin: 50px 50px 98px 50px;
            color: #3CAFA4;
        }
        
        li {
            list-style: none;
            float: left;
            font-size: 60px;
            margin: 0 10px;
        }
        
        #hour,
        #minute,
        #second {
            width: 77px;
            height: 77px;
            line-height: 77px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <h4>钟表计时器(原创)</h4>
            <ul>
                <li id="hour"></li>
                <li>:</li>
                <li id="minute"></li>
                <li>:</li>
                <li id="second"></li>
            </ul>
        </div>
    </div>
    <script>
        window.onload = function() {
            var hour = document.querySelector("#hour");
            var minute = document.querySelector("#minute");
            var second = document.querySelector("#second");

            function setTimer() {

                var date = new Date();
                if (date.getHours() < 10) {
                    hour.innerText = "0" + date.getHours();
                } else {
                    hour.innerText = date.getHours();
                }
                if (date.getMinutes() < 10) {
                    minute.innerText = "0" + date.getMinutes();
                } else {
                    minute.innerText = date.getMinutes();
                }
                if (date.getSeconds() < 10) {
                    second.innerText = "0" + date.getSeconds();
                } else {
                    second.innerText = date.getSeconds();
                }

            }

            function judge() {
                if (Number(hour.innerText) >= 6 && Number(hour.innerText < 12)) {
                    alert("早上好")
                } else if (Number(hour.innerText) >= 12 && Number(hour.innerText < 18)) {
                    alert("上午好")
                } else {
                    alert("下午好")
                }
            }

            function startTimer() {
                setInterval(setTimer, 500);
            }
            startTimer();
            judge();


        }
    </script>
</body>

</html>

本文链接: http://www.dtmao.cc/news_show_400060.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?