本文主要是介绍原生JS实现实时钟表,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
分享一个用原生JS实现的实时钟表特效,效果如下(PS:实际指针是按360度走的,截图时只截了一部分)
上面的效果一共需要4张图片,分别是表盘、时针、分针、秒针,根据需要可以自己做图片,实现的代码如下:
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>原生JS实现实时钟表</title><style>.clock {width: 600px;height: 600px;margin: 100px auto;/* 表盘背景 */background: url(images/0.jpg) no-repeat;position: relative;}.clock div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* 时针图片 */background: url(images/1.png) no-repeat center center;}#
这篇关于原生JS实现实时钟表的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!