⏰题目要求

⏰html代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>简洁的圆形时钟js代码</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head>
<body><div class="container"><div class="clock"><div id="date" class="date box"></div><div class="clock-face"><div class="marker twelve"></div><div class="marker three"></div><div class="marker six"></div><div class="marker nine"></div><div id="minute-hand" class="hand minute-hand"></div><div id="hour-hand" class="hand hour-hand"></div><div id="second-hand" class="hand second-hand"></div><div id="centre" class="centre"></div><div id="digital-time" class="digital-time box"></div></div></div></div><script  src="js/script.js"></script></body>
</html>

⏰css代码

* {transition: color .4s, background .4s, border .4s;transition-timing-function: ease-in;
}
body {background: #F9FBE7;
}
body.dark {background: #223;
}
.container {display: flex;height: 100vh;
}
.clock {position: relative;margin: auto;width: 220px;height: 260px;
}
.box {color: #7986CB;background: #EDE7F6;font-size: 20px;text-align: center;font-family: Lato, sans-serif;border: 2px solid #D1C4E9;border-radius: 4px;
}
.dark .box {color: #90CAF9;background: #4527A0;border: 2px solid #673AB7;
}
.date {width: 160px;padding: 5px 8px;position: absolute;top: -65px;left: 15px;
}
.clock-face {position: absolute;height: 220px;width: 220px;background: #EDE7F6;border-radius: 50%;border: 4px solid #D1C4E9;
}
.dark .clock-face {background: #4527A0;border: 4px solid #673AB7;
}
.marker {position: absolute;width: 10px;height: 10px;background: #7986CB;border-radius: 50%;
}
.dark .marker {background: #90CAF9;
}
.twelve {left: 105px;top: 8px;
}
.three {right: 8px;top: 105px;
}
.six {left: 105px;bottom: 8px;
}
.nine {left: 8px;top: 105px;
}
.hand {position: absolute;left: 110px;transform-origin: 0%;border-radius: 0 50% 50% 0;
}
.hour-hand {height: 8px;width: 62px;top: 107px;background: #F06292;
}
.dark .hour-hand {background: #E91E63;
}
.minute-hand {height: 6px;width: 88px;top: 108px; background: #FF8A65;
}
.dark .minute-hand {background: #FF9800;
}
.second-hand {height: 3px;width: 98px;top: 109px; background: #777;
}
.dark .second-hand {background: #eee
}
.centre {position: absolute;width: 16px;height: 16px;background: #777;border-radius: 50%;top: 102px;left: 102px;
}
.dark .centre {background: #eee
}
.digital-time {width: 90px;padding: 5px 8px;position: absolute;top: 250px;left: 55px;
}
.dark .digital-time {color: #90CAF9;background: #4527A0;border: 2px solid #673AB7;
}.switch-label {color: #7986CB;padding-right: 6px;line-height: 1.6em;font-family: Lato, sans-serif;font-size: 0.9em;
}
.dark .switch-label {color: #90CAF9;
}
/* The switch - the box around the slider */
.switch {position: relative;display: inline-block;width: 44px;height: 24px;
}
/* Hide default HTML checkbox */
.switch input {opacity: 0;width: 0;height: 0;
}
/* The slider */
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #aaa;transition: .4s;
}
.slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 3px;bottom: 3px;background-color: #fff;transition: .4s;
}
input:checked + .slider {background-color: #90CAF9;
}
input:focus + .slider {box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {transform: translateX(20px);
}
/* Rounded sliders */
.slider.round {border-radius: 8px;
}.slider.round:before {border-radius: 5px;
}

⏰js代码

//(1)声明一个7个长度的数组days
var days =[];
days[0]= '星期日';
days[1]= '星期一';
days[2]= '星期二';
days[3]= '星期三';
days[4]= '星期四';
days[5]= '星期五';
//(2)往数组days后面添加一个元素，值为星期六;
days[6]= '星期六';var dateDisplay = document.getElementById('date');
var hourHand = document.getElementById('hour-hand');
var minuteHand = document.getElementById('minute-hand');
var secondHand = document.getElementById('second-hand');
var digitalTime = document.getElementById('digital-time');var clock = function() {  //(3)获取当前时间var timeNow = new Date();   var day = timeNow.getDay();var date = timeNow.getDate();var month = timeNow.getMonth();dateDisplay.innerHTML = days[day];//(4)获取当前时间的秒var seconds =timeNow.getSeconds() ;var sRot = seconds * 6 - 90;//(5)获取当前时间的分钟var minutes = timeNow.getMinutes();var mRot = (minutes * 6) + (seconds / 10) - 90;//(6)获取当前时间的小时var hours = timeNow.getHours();var hRot = (hours % 12 * 30) + (minutes / 2) - 90;hourHand.style.transform = "rotate("+hRot+"deg)";minuteHand.style.transform = "rotate("+mRot+"deg)";secondHand.style.transform = "rotate("+sRot+"deg)";//(7)给digitalTime的内容赋值digitalTime.innerHTML= format(hours)+":"+format(minutes)+":"+format(seconds);}function format(num) {//(8)三元运算符，如果小于10则在num前面加个0，否则返回numreturn num=num<10?'0'+num:num;
}(function run() {//(9)调用clock方法clock();//(10)(11)(12)定义定时器1秒后执行调用自己setTimeout(function(){ run();}, 1000);
})();

⏰代码分析

本题的考核是js代码的补充，其中考核重点是日期对象。

首先js中的日期对象需要使用new Date()实例化对象才能使用

Date对象的常用get方法

时钟需要获取到小时、分钟、秒

所以需要用到getHours()、getMinutes()、getSeconds()来获取

❗PS:

虽然指针时钟不是本题的考核，但也是一个重点

指针的移动是通过transform属性来设置旋转角度

其次就是指针移动的算法

秒：var sRot = seconds * 6 - 90;

分：var mRot = (minutes * 6) + (seconds / 10) - 90;

时：var hRot = (hours % 12 * 30) + (minutes / 2) - 90;

最后计时器不能忘记设置和调用

1000毫秒=1秒

⏰实现效果

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级例题)相关推荐

数字开头的正则表达式_初学Web前端要注意什么正则表达式是怎么回事
初学Web前端要注意什么?正则表达式是怎么回事?很多初学Web前端的同学对于正则表达式的印象就是难学,全是各种各样的特殊符号,完全没有规律可循,根本不知道怎么下手.不过真正了解正则表达式之后,你会发现 ...
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript web前端大二实训大作业
HTML5期末大作业:饮食食品主题设计--绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网页 ...
HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
Java Swing 小项目：模拟时钟/指针时钟 + 数字日期时钟的实现
原文链接:https://xiets.blog.csdn.net/article/details/130685267 版权声明:原创文章禁止转载 Java Swing 图形界面开发(目录) 使用 Ja ...
web前端入门到实战：JavaScript字符串转换数字
js 字符串转换数字方法主要有三种: 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者 ...
C51数字电子日历/时钟设计
题目要求: 数字电子日历/时钟设计设计一个基于MCS51的电子日历和时钟. 基本要求 (1) 可通过按键在日历和时间之间切换显示: (2) 可由按键调整日期和时间 (3) 可整点报时("嘟 ...
JS简单的指针时钟动态效果
简单的指针时钟动态效果 <!DOCTYPE html> <html> <head> <title>指针时钟</title> <meta ...
android 时钟动态图标,Android 8.1 Launcher3实现动态指针时钟功能
本文主要实现功能,可能有不合理的地方首先创建一个实现功能的工具里,直接上代码: import android.content.Context; import android.graphics.Bit ...
Android指针时钟的实现代码
最近写了个指针时钟的小程序,拿出来和大家分享一下. 指针时钟控件实现: 关键点: 1.Android自定义控件实现 2.Android自定义控件命名空间 3.Android自定义控件从布局文件中获取参 ...
数字同步网络时钟系统设计方案
数字同步网络时钟系统设计方案本文按照YTD 5089-2000数字同步网工程设计规范,对数字同步网的基准时钟建设进行了简单说明,并对其时钟系统的三级结构组成以及可用设备进行了简单的说明. 数字同步网 ...

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级例题)

⏰题目要求

⏰html代码

⏰css代码

⏰js代码

⏰代码分析

❗PS:

⏰实现效果

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级例题)相关推荐

最新文章

热门文章

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级 例题)

⏰题目要求

⏰html代码

⏰css代码

⏰js代码

⏰代码分析

❗PS:

⏰实现效果

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级 例题)相关推荐

最新文章

热门文章

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级例题)

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级例题)相关推荐