HTML+css+js实现网页时钟、全网做得最好的时钟！

这个时钟应该是全网做得最好的一个，原文的js部分没写注释，在学习的时候加上了注释，希望有助于理解~

html块代码

<!doctype html>
<html>
<head><meta charset="UTF-8"><link rel='stylesheet' href='./时钟.css' /><title>时钟</title>
</head>
<body><div class="clock" id="clock"><!-- 原点 --><div class="origin"></div><!-- 时分秒针 --><div class="clock-line hour-line" id="hour-line"></div><div class="clock-line minute-line" id="minute-line"></div><div class="clock-line second-line" id="second-line"></div><!-- 日期 --><div class="date-info" id="date-info"></div><!-- 时间 --><div class="time-info" ><div class="time" id="hour-time"></div><div class="time" id="minute-time"></div><div class="time" id="second-time"></div></div></div>
<script type='text/javascript' src='./时钟.js'></script>
</body>
</html>

css代码

/* 全局 */
*{margin:0;padding:0;}/* 外面的大盒子 */.clock{width:400px;height:400px;border:10px solid #333;box-shadow: 0px 0px 20px 3px #444 inset;border-radius:50%;position:relative;margin:5px auto;z-index:10;background-color:#f6f6f6;}/* 时钟数字 */.clock-num{width:40px;height:40px;font-size:22px;text-align:center;line-height:40px;position:absolute;z-index:8;color:#555;font-family:fantasy, 'Trebuchet MS';}.em_num{font-size:28px;}/* 指针 */.clock-line{position:absolute;z-index:20;}.hour-line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px;transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;}.minute-line{width:130px;height:2px;top:199px;left:190px;background-color:#000;transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;}.second-line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60;transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;}/* 原点 */.origin{width:20px;height:20px;border-radius:10px;background-color:#000;position:absolute;top:190px;left:190px;z-index:14;}/* 日期 时间 */.date-info{width:160px;height:28px;line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555;font-weight:bold;font-family:'微软雅黑';}.time-info{width:92px;height:30px;line-height:30px;text-align:center;position:absolute;top:270px;left:154px;z-index:11;background-color:#555;padding:0;box-shadow:0px 0px 9px 2px #222 inset;}.time{width:30px;height:30px;text-align:center;float:left;color:#fff;font-weight:bold;}#minute-time{border-left:1px solid #fff;border-right:1px solid #fff;}/* 刻度 */.clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7;position:absolute;top:199px;left:200px;}.scale-show{width:12px;height:2px;background-color:#555;float:left;}.scale-hidden{width:183px;height:2px;float:left;}

js代码

(function(){//自己调用自己//页面加载完成时运行，将实参传给下面的函数window.onload=initNumXY(200, 160, 40,40);//获取指针的时分秒var hour_line = document.getElementById("hour-line");var minute_line = document.getElementById("minute-line");var second_line = document.getElementById("second-line");var date_info = document.getElementById("date-info");var week_day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];//获取时间的时分秒var hour_time = document.getElementById("hour-time");var minute_time = document.getElementById("minute-time");var second_time = document.getElementById("second-time");//在底部调用函数function setTime(){var this_day = new Date();//如果时间大于12小时，就减去12小时var hour = (this_day.getHours() >= 12) ?(this_day.getHours() - 12) : this_day.getHours();var minute = this_day.getMinutes();var second = this_day.getSeconds();//定义小时转的角度var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6);//获取4位数的年份var year = this_day.getFullYear();//获取月份，如果小于10，要加0var month = ((this_day.getMonth() + 1) < 10 ) ?"0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1);//获取天数，小于10 加上0var date = (this_day.getDate() < 10 ) ?"0"+this_day.getDate() : this_day.getDate();//获取星期var day = this_day.getDay();//获取要转的度数hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';minute_line.style.transform = 'rotate(' + (minute*6 - 90) + 'deg)';second_line.style.transform = 'rotate(' + (second*6 - 90)+'deg)';//写入年月日date_info.innerHTML = year + "-" + month + "-" + date + " " + week_day[day];//在框框内写入时分秒hour_time.innerHTML = (this_day.getHours() < 10) ?"0" + this_day.getHours() : this_day.getHours();minute_time.innerHTML = (this_day.getMinutes() < 10) ? "0" + this_day.getMinutes() : this_day.getMinutes();second_time.innerHTML = (this_day.getSeconds() < 10) ?"0" + this_day.getSeconds():this_day.getSeconds();}//1秒执行一次setInterval(setTime, 1000);//让1至12个数按函数排这个位置function initNumXY(R, r, w, h){//数组里面装对象，每个元素对应每个数字的位置var numXY = [{"left" : R + 0.5 * r - 0.5 * w, "top" : R - 0.5 * r * 1.73205 - 0.5 * h},{"left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0.5 * r - 0.5 * h},{"left" : R + r - 0.5 * w, "top" : R - 0.5 * h},{"left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h},{"left" : R + 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h},{"left" : R - 0.5 * w, "top" : R + r - 0.5 * h},{"left" : R - 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h},{"left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h},{"left" : R - r - 0.5 * w, "top" : R - 0.5 * h},{"left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0.5 * r - 0.5 * h},{"left" : R - 0.5 * r - 0.5 * w, "top": R - 0.5 * r * 1.73205 - 0.5 * h},{"left" : R - 0.5 * w, "top" : R - r - 0.5 * h}];//获取大盒子var clock = document.getElementById("clock");//for循环，规定值小于12，for(var i = 1; i <= 12; i++){//如果除以3能除完，就在div盒子里面写入，并且有两个样式if(i%3 == 0) {clock.innerHTML += "<div class='clock-num em_num'>"+i+"</div>";} else {clock.innerHTML += "<div class='clock-num'>" + i + "</div>";}}//获取时钟数字的class类名var clock_num = document.getElementsByClassName("clock-num");//时钟数的位置for(var i = 0; i < clock_num.length; i++) {clock_num[i].style.left = numXY[i].left + 'px';clock_num[i].style.top = numXY[i].top + 'px';}//在div盒子里面写入刻度for(var i = 0; i < 60; i++) {clock.innerHTML += "<div class='clock-scale'> " + "<div class='scale-hidden'></div>" + "<div class='scale-show'></div>" + "</div>";}var scale = document.getElementsByClassName("clock-scale");//将刻度分散布在整个钟表上for(var i = 0; i < scale.length; i++) {scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";}}})();

转载来自：https://www.jb51.net/article/88314.htm

HTML+css+js实现网页时钟、全网做得最好的时钟！相关推荐

HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
#3使用html+css+js制作网页制作登录网页
#3使用html+css+js制作网页制作登录网页本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
html+css+js实现网页拼图游戏
代码地址如下: http://www.demodashi.com/demo/14449.html 项目描述使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效 ...
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML+CSS+JS电影网页设计 DW个人网页制作 Hbuilder制作简单的电影网页在线电影网页设计与制作 web前端大作业
一.制作介绍网页作品代码简单html+css制作,可使用任意HTML编辑软件(如:Dreamweaver.HBuilder.Vscode .Sublime .Webstorm.Text .Notep ...

HTML+css+js实现网页时钟、全网做得最好的时钟！

HTML+css+js实现网页时钟、全网做得最好的时钟！相关推荐

最新文章

热门文章