最终实现的效果如下，可进入展示页面查看
展示页面：http://xyy9.gitee.io/roll/
位于映像标题右侧显示，实时获取当前时间，各指针随时间转动

HTML

<!--时间表-->
<div id="Clock"><img id="clock_" src="img/clock.png" ><img id="clock_hour" src="img/clock_hour.png" ><img id="clock_minute" src="img/clock_minute.png" ><img id="clock_second" src="img/clock_second.png" >
</div>
<div id="timer"><div id="time_year">2019年11月20日</div><div id="time_clock">0时0分0秒</div><div id="time_weekday">周一</div>
</div>

clock.css

#Clock{width: 150px;height: 150px;left: 1500px;top: 150px;position: relative;
}
#clock_{width: 150px;height: 150px;left: ;top: -150px;position: relative;
}
#clock_hour{width: 150px;height: 150px;left: ;top: -303px;position: relative;
}
#clock_minute{width: 150px;height: 150px;left: ;top: -456px;position: relative;
}
#clock_second{width: 150px;height: 150px;left: ;top: -609px;position: relative;
}

timer.js

//时钟计时function displayTime(){var date = new Date();var hour = date.getHours();var min = date.getMinutes();var sec = date.getSeconds();var timestr_year = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";var timestr_clock = date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";var weekday_num = date.getDay()+1;var weekday_str;switch (weekday_num){case 0:weekday_str = "一";break;case 1:weekday_str = "二";break;case 2:weekday_str = "三";break;case 3:weekday_str = "四";break;case 4:weekday_str = "五";break;case 5:weekday_str = "六";break;case 6:weekday_str = "日";break;default:break;}var timestr_weekday = "周"+weekday_str;document.getElementById("time_year").innerHTML = timestr_year;document.getElementById("time_clock").innerHTML = timestr_clock;document.getElementById("time_weekday").innerHTML = timestr_weekday;var imgHour = document.getElementById('clock_hour');var imgMin = document.getElementById('clock_minute');var imgSec = document.getElementById('clock_second');imgHour.style.transform = 'rotate(' + hour*30 + 'deg)';imgMin.style.transform = 'rotate(' + min*6 + 'deg)';imgSec.style.transform = 'rotate(' + sec*6 + 'deg)';}
intervalTime = setInterval(displayTime,1000);

网站源码：码云仓库
图片：
表盘 clock.png
https://gitee.com/xyy9/roll/blob/master/img/clock.png
时针clock_hour.png
https://gitee.com/xyy9/roll/blob/master/img/clock_hour.png
分针clock_minute.png
https://gitee.com/xyy9/roll/blob/master/img/clock_minute.png
秒针clock_second.png
https://gitee.com/xyy9/roll/blob/master/img/clock_second.png

HTML时钟日历插件编写相关推荐

html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
给开发者准备的 10 款最好的 jQuery 日历插件
1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标记,但是可以使用数据来填充 Underscore.js HT ...
前端ui组件(1):日程排班—11个优秀JavaScript 日历插件
日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...
uniapp日历插件
日历插件效果图一.使用方法二.组件编写,两个文件.直接上代码 month.vue calendar.vue 效果图一.使用方法 <template><view>< ...
可编辑的日历控件_选择正确的WordPress编辑日历插件
可编辑的日历控件什么是编辑日历? (What is an Editorial Calendar?) An editorial calendar is the foundation of strate ...
使用JS实现简单的日历插件
实现简单的日历插件一.简要介绍二.基础代码 html部分 js部分一.简要介绍实现一个如下图所示的日历,这边主要提供html部分和js部分的代码,css部分大家自行编写哦. 二.基础代码 ...
记录--手把手带你开发一个uni-app日历插件（并发布）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助相信我们在开发各类小程序或者H5,甚至APP时,会把uni-app作为一个技术选型,其优点在于一键打包多端运行,较为强大的跨平台的性能.但 ...
超好用的js 日历插件日期插件日期日历选择控件
前情提要: 主要是目前项目较小,仅需要一个日历插件,就没有选择引用UI框架,单纯找了一个日历插件,外观相对简单大方,还不错,而且只需要2步就可以完成引入: 第一步(有2种方式引入,支持单独引入文件及n ...
年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...
插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...

HTML时钟日历插件编写

HTML

clock.css

timer.js

HTML时钟日历插件编写相关推荐

最新文章

热门文章