H5学习之制作时钟 - 会coding的HAM

效果图
代码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        main{
            width: 680px;
            height: 680px;
            background-color: #EEEEEE;
            /*设置边框*/
            border: 5px solid black;
            margin: 40px auto;
            /*设置边框角度*/
            border-radius: 50%;
        }
        section{
            width: 600px;
            border: 1px solid black;
            border-left: none;
            border-right: none;
            margin: 250px auto;
            /*使文本居中*/
            text-align: center;
        }
        #time{
            font-size: 150px;
            /*设置行高*/
            line-height: 150px;
            color: #333333;
        }
        #date{
            font-size: 40px;
            color: #aaaaaa;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!--main定义了文档的主要内容，它里面的内容相对于文档里面的内容必须是唯一的-->
    <main>
        <section>
            <header id="date"></header>
            <div id="time"></div>
            <!--id唯一标示符-->
        </section>
    </main>
    <!--script脚本文件-->
    <script>
        // 定义一个函数 function是一个关键字 后面是函数名 
        // 函数名是自己定义的 但是要有实际意义
        // 命名规范：驼峰命名法 首单词小写其余每个单词的首字母大写
        function showTime(){
            // var 是定义变量的关键字 now 是自己定义的 等号后面是给变量赋值的
            // = 是赋值 也就是时候把右边的值赋值给左边
            // 获取当前的时间
            var now = new Date()
            // getHours获取当前的小时
            var hour = now.getHours()
            var minute = now.getMinutes()
            var second = now.getSeconds()

            // console.log(minute)      调试用 打印到控制台

        // 三元运算符 ? 号前面是一个判断语句
        //             如果条件为真 执行第一个值
        //             如果条件为假 执行第二个值
        //         格式： 条件语句?值1:值2
        second = second < 10 ? '0' + second:second
        minute = minute < 10 ? '0' + minute:minute
        hour = hour < 10 ? '0' + hour:hour

            // document是JavaScript的一个对象
            // getElementById它是一个函数 作用是通过id获取相对应的元素
            // innerHTML属性设置返回HTML标签中间的内容
            document.getElementById('time').innerHTML = hour + ':' + minute + ':' + second

            // 获取年份
            var year = now.getFullYear()
            // 获取月份 getMonth获取的数值是0-11 每次要加1
            var month = now.getMonth() + 1
            // 获取日期
            var date = now.getDate()
            // 获取周几
            var week = now.getDay()
            switch(week){
                case 1 :
                week = '一'
                break;
                case 2 :
                week = '二'
                break;
                case 3 :
                week = '三'
                break;
                case 4 :
                week = '四'
                break;
                case 5 :
                week = '五'
                break;
                case 6 :
                week = '六'
                break;
                case 7 :
                week = '日'
                break;
            }

            document.getElementById('date').innerHTML = year + '年' + month + '月' + date + '日' + ' ' + '周'  + week
        }
        showTime()
        
        // 设置定时器 每隔一秒的时间执行一次showTime()
        // 第一个参数执行的是函数名
        // 第二个参数指的是时间间隔 单位是毫秒
        setInterval(showTime,1000)
    </script>
</body>
</html>
这个不需要额外素材图片，纯H5制作！
发送评论编辑评论
发送评论 编辑评论

推荐文章

发送评论编辑评论
