前端——实现时钟附带小例子

news2024/9/23 15:55:09

创建日期对象

toLocaleDateString() 获取日期

console.log(date.toLocaleDateString())

toLocaleTimeString() 获取时间

console.log(date.toLocaleTimeString())

toLocaleString() 获取日期和时间

console.log(date.toLocaleString())

date.getDay() 获取星期几周日为0 取值区间为0~6

date.getDate() 获取日

date.getMonth() 获取月 区间为0~11

date.getYear() 获取年

date.getTime() 获取时间 时间戳

例子运用

实现一个时钟（css自设）最终效果图如下

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var container=document.querySelector(".container")
            var start= new Date().getTime()
            var change=function(){
                var date= new Date()
                container.innerHTML=date.toLocaleString()
                var timer= setTimeout(change,1000)
                var end=date.getTime()
                if(end-start>1000*10){
                   clearTimeout(timer)
                }
            }

            change()


        }
    </script>
    <style>
        .container{
            margin: 50px auto;
            font-size: 100px;
            line-height: 400px;
            text-align: center;
            width: 60%;
            height: 400px;
            border: 50px rgb(204, 122, 28) dotted;
            background: linear-gradient(0deg,rgb(219, 197, 54),rgb(31, 192, 204));
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2157921.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！