JS和setInterval()一起写一个动态时钟

最新推荐文章于 2024-08-15 17:26:23 发布
最新推荐文章于 2024-08-15 17:26:23 发布
阅读量405 收藏 1
点赞数
分类专栏： web前端基础 文章标签： javascript css html
原文链接：http://www.jq22.com/code3189
版权
本文介绍了一款使用HTML5、CSS3和JavaScript技术手工绘制的时钟，该时钟具备传统指针与时钟面设计，同时实时显示当前时间。文章详细展示了时钟的制作过程，包括时针、分针、秒针的定位技巧及动态时间更新的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我写的这个时钟分两部分，一个是钟表，一个是表里面的现代时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,li,ol {
            list-style: none;
        }
        body {
            background-color: #74c4c8;
        }
        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        /* 通过背景图径向渐变实现外层西瓜色效果 */
        .shizhong {
            width: 200px;
            height: 200px;
            background-image: radial-gradient(#ec7277 0,#ec7277 60%,
            #e1ecde 60%,#e1ecde 63%,
            #079554 63%,#079554 68%,
            #056e3e 68%, #056e3e 100%
            );
            border-radius: 50%;
            position: relative;
        }
        .shizhong::after {
            content: "";
            display: block;
            width: 4%;
            height: 4%;
            border-radius: 50%;
            background: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        /* 刻度 */
        .kedu {
            width: 81%;
            height: 81%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
        }
        .kedu-content {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
        }
        .kedu-content>span {
            display: block;
            width: 100% ;
            height: 1%;
            position: absolute;
        }
        /* 30组格子线，每隔6deg(度)是一组 */
        .kedu-content>span:nth-child(1) {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            
        }
        .kedu-content>span:nth-child(2) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(6deg);
            
        }
        .kedu-content>span:nth-child(3) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(12deg);
            
        }
        .kedu-content>span:nth-child(4) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(18deg);
            
        }
        .kedu-content>span:nth-child(5) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(24deg);
            
        }
        .kedu-content>span:nth-child(6) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(30deg);
            
        }
        .kedu-content>span:nth-child(7) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(36deg);
            
        }
        .kedu-content>span:nth-child(8) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(42deg);
            
        }
        .kedu-content>span:nth-child(9) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(48deg);
            
        }
        .kedu-content>span:nth-child(10) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(54deg);
            
        }
        .kedu-content>span:nth-child(11) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(60deg);
            
        }
        .kedu-content>span:nth-child(12) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(66deg);
            
        }
        .kedu-content>span:nth-child(13) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(72deg);
            
        }
        .kedu-content>span:nth-child(14) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(78deg);
            
        }
        .kedu-content>span:nth-child(15) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(84deg);
            
        }
        .kedu-content>span:nth-child(16) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(90deg);
            
        }
        .kedu-content>span:nth-child(17) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(96deg);
            
        }
        .kedu-content>span:nth-child(18) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(102deg);
            
        }
        .kedu-content>span:nth-child(19) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(108deg);
            
        }
        .kedu-content>span:nth-child(20) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(114deg);
            
        }
        .kedu-content>span:nth-child(21) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(120deg);
            
        }
        .kedu-content>span:nth-child(22) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(126deg);
            
        }
        .kedu-content>span:nth-child(23) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(132deg);
            
        }
        .kedu-content>span:nth-child(24) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(138deg);
            
        }
        .kedu-content>span:nth-child(25) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(144deg);
            
        }
        .kedu-content>span:nth-child(26) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(150deg);
            
        }
        .kedu-content>span:nth-child(27) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(156deg);
            
        }
        .kedu-content>span:nth-child(28) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(162deg);
            
        }
        .kedu-content>span:nth-child(29) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(168deg);
            
        }
        .kedu-content>span:nth-child(30) {
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(173deg);
            
        }
        /* 通过伪元素设置对角的格子线 */
        .kedu-content>span::after,.kedu-content>span::before {
            content: "";
            display: block;
            width: 4% ;
            height: 100%;
            background: #555555;
            position: absolute;
        }
        .kedu-content>span::before {
            top: 0;
            left: 0;
        }
        .kedu-content>span::after {
            top: 0;
            right: 0;
        }
        /* 改变1-12时线的宽度，因为会更长一些 */
        .kedu-content>span:nth-child(1)::after,.kedu-content>span:nth-child(1)::before {
           width: 7%;
        }
        .kedu-content>span:nth-child(6)::after,.kedu-content>span:nth-child(6)::before {
           width: 7%;
        }
        .kedu-content>span:nth-child(11)::after,.kedu-content>span:nth-child(11)::before {
           width: 7%;
        }
        .kedu-content>span:nth-child(16)::after,.kedu-content>span:nth-child(16)::before {
           width: 7%;
        }
        .kedu-content>span:nth-child(21)::after,.kedu-content>span:nth-child(21)::before {
           width: 7%;
        }
        .kedu-content>span:nth-child(26)::after,.kedu-content>span:nth-child(26)::before {
           width: 7%;
        }
        /* 时针 */
        .shiZhen {
            height: 45%;
            width: 1.5%;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .shiZhen::before {
            content: "";
            display: block;
            height: 50%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background:#a0161b;
        }

        /* 分针 */
        .fenZhen {
            height: 57%;
            width: 1%;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .fenZhen::before {
            content: "";
            display: block;
            height: 50%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: orangered;
        }
        /* 秒针 */
        .miaoZhen {
            height: 65%;
            width: 1%;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .miaoZhen::before {
            content: "";
            display: block;
            height: 50%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #333333;
        }

        /* 当前时间样式 */
        #time {
				text-align: center;
				position: absolute;
                font-size: 12px;
				top: 10%;
				left: 50%;
                transform: translateX(-50%);
		}
    </style>
</head>
<body>
    
    <div class="container">
        <div class="shizhong">
            <!-- 刻度 -->
            <div class="kedu">
                <div class="kedu-content">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div id="time"></div>

            </div>
            <!-- 时针 -->
            <div class="shiZhen" id="sz"></div>
            <!-- 分针 -->
            <div class="fenZhen" id="fz"></div>
            <!-- 秒针 -->
            <div class="miaoZhen" id="mz"></div>
        </div>
    </div>

</body>

<script>
    // 通过id获取html元素
    var shizhen = document.getElementById("sz");
    var fenzhen = document.getElementById("fz");
    var miaozhen = document.getElementById("mz");

    // 将时间与时针转动关联
    function setTime() {
        // 用Date内置的API获取当前时间
        var date = new Date();
        var intHour = date.getHours();
        var intMinute = date.getMinutes();
        var intSecond = date.getSeconds();

        shizhen.style.transform="translate(-50%,-50%) rotate("+((intHour%12)/12)*360+"deg) ";
        fenzhen.style.transform="translate(-50%,-50%) rotate("+(intMinute/60)*360+"deg) ";
        miaozhen.style.transform="translate(-50%,-50%) rotate("+(intSecond/60)*360+"deg) ";

    }

    setInterval(setTime,1000);


    // 显示当前时间
    function sayTime() {
		let date = new Date();
		let hour = date.getHours();
		let minute = date.getMinutes();
		let second = date.getSeconds();
		if (hour < 10) {
			hour = "0" + hour;
		}

        if (minute < 10) {
            minute = "0" + minute;
        }

        if (second < 10) {
            second = "0" + second;
        }

        let time = document.getElementById("time");
        time.innerHTML = hour + ":" + minute + ":" + second;
    }

	setInterval(sayTime, 1000);
</script>



</html>

代码虽说很长，但是很简单，相信只要看应该看得懂，说一下我遇到的问题，就是一开始给时针、分针、秒针采用定位的时候，最好是所有的针在没动起来之前都能停靠在十二点的位置，因为这样后面写的就不会出现多了个角度这个问题。
页面效果：
在这里插入图片描述

JS使用setInterval()计时器方法实现简单当前时间动态显示
qq_44061998的博客
04-03 941
主要使用了setInterval()方法和Date()的属性和方法
HTML+CSS+JS实现动态时钟
weixin_44603415的博客
06-16 2332
HTML+CSS+JS实现动态时钟 （此实例将三者都写在了一起） step 1 先画一个圆 在body里面创建一个div <div class="clock"></div> 在head里利用style标签设置clock的css .clock{ height: 500px; width: 500px; border-radius: 50%; border: 1px solid black;
动态时钟，利用setInterval
03-31
初学js
js使用setInterval简单实现一个时钟
weixin_30237281的博客
09-24 558
var myVar=setInterval(function(){ myTimer() },1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } ...
setInterval 实现时钟功能
丿灬安之若死
07-11 682
&lt;p&gt;手表&lt;/p&gt; &lt;p id="demo"&gt;&lt;/p&gt; &lt;script&gt; var myVar = setInterval(function () { myTimer() }, 1000) function myTimer() { var d = new Date(); ...
用JavaScript的setInterval（）实现动态时钟效果
小灰狼与大白兔的博客
01-25 7996
setInterval（）可按照指定的周期（以毫秒计）来调用函数或计算表达式， 语法格式： setInterval("调用的函数名称"，周期性调用函数之间间隔的毫秒数) setInterval()会不停调用函数，直到窗口被关闭或被其他方法强制停止 示例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8...
电子时钟（用js和html）
04-16
综上所述，这个“电子时钟（js和html联合在一起写的）”项目是一个很好的实践，它涵盖了HTML页面结构、JavaScript日期处理、定时器使用、DOM操作以及基本的CSS样式应用等基础Web开发技能。通过这个项目，开发者可以...
用 js canvas 做一个优雅的模拟时钟， canvas 教程实例
最新发布
学习笔记
08-15 1220
有很多次，我都想找到一个比较不错的，可以查看模拟时钟的网页。 有时候是想看下距离某个时间点还有多长时间，有时候是想看一下，两个时间点之间的间隔是多少。因为模拟时钟的排布比数字时钟要更直观。 但一直没有找到。这些天闲的时候就想做个 canvas 模拟时钟玩，慢慢就做出效果来了。 目前的大致效果如下：可访问的地址：我对模拟时钟的需求有几个：你需要具备使用 canvas 绘制简单图形的能力，不需要复杂，会画个方块、圆、文字，就可以了。 很简单，直接看 MDN 官方文档上的例子就能看明白。会了基础的操作之后，就说一
js实现时钟转动
Zhang_wang_yun的博客
04-17 1322
声明一个`间歇函数`来让时钟每秒自动转动，在里面声明三个`变量`来定义` transform: rotate();`，规定三个钟针旋转多少度。
Javascript编写翻页时钟(包括定时和闹钟功能)
qq_46071321的博客
09-30 2413
首先，HTML结构 <!-- 翻牌的外框 --> <div class="flip"> <!-- 位于前面的纸牌 --> <div class="digital front number0"></div> <!-- 位于后面的纸牌 --> <div class="digital back number1"></div> </div> f
动态时钟(时间函数、setInterval)
这个Bug怎么解啊？
11-14 844
时间函数、setInterval
setInterval的用法，举例时钟特效
婷_Milena_516的博客
05-22 1180
setInterval的作用是每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。 setInterval的语法格式：setInterval(function,time) 参数： function是调用的函数名或是调用的匿名函数 time是调用两次function的时间间隔，以毫秒为单位 下面的时钟例子中每1毫秒就调用getCurrentTime函数获取当前时间，例子中设有两个按钮分别是“暂停”和“重新启动”。 getCurrentTime函数如下 function get
如何使用window.setInterval制作时钟
SundayHugo的专栏
09-18 1490
今天参考网上的一些case学习了一下动态时钟的写法，先看看html和JS怎么写： 这里的函数还是比较简单的，主要是通过window.setInterval(changeClock, 1000);没秒调用一次changeClock，然后再通过innerHTML方法跟新页面显示。这里有一个问题，就是为什么月份要加1？ function changeClock() { var da
Jquery制作一个动态的时钟
小小鸟的博客
10-27 742
Jquery制作一个动态的时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ border-radius:...
javascript中date对象,Date对象,时钟案列,setInterval,setTimeout,定时器
一只苟延残喘的卑微蝼蚁
12-11 687
javascript中date对象,Date对象,时钟案列,setInterval,setTimeout,定时器 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;javascript中date对象,Date对象,时钟案列,setInterval,setTimeou...
用setInterval写 单按钮控制时钟
weixin_41411644的博客
07-16 337
用setInterval写了可暂停的时钟 乱写了单按钮控制时钟停走的js程序。。比较菜别喷哦。。。[/ 笑哭] <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewpo...
js setInterval()方法实现进度条动态加载
weixin_44176432的博客
05-14 988
使用 bootstrap 和 html dom setInterval() 方法实现进度条动态加载。
setInterval()实现时间刷新
gcdm0708的博客
04-19 4231
setInterval()什么是setInterval()？                setInterval()是Window对象的一个方法。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。setInterval()语法：      ...
js笔记之Date、setInterval 定时器小练习
几百块的博客
05-17 311
来判断不同代码效率高低 var date1=new Date() for (let i = 0; i <1000 ; i++) { console.log('hello') } var date2=new Date() console.log(date2-date1) 定义函数实现：接收用户输入用户名：对用户的输入给予反馈： 要求：用户名不能为空、长度必须在6-10个字符之间 第一个字符不能是数字，并且用户名必须是数字，字母构成。 最后要求：该函数返回不同的值，代表违反了不
使用HTML5 Canvas绘制动态时钟教程
利用canvas来绘制时钟是一个很好的实践项目，它不仅可以帮助开发者熟悉canvas的API，还能够深入理解三角函数在图形绘制中的应用。下面将详细解读如何使用HTML5的canvas元素来绘制一个时钟。 ### 1. Canvas基础概念 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值