前端页面实现时钟效果

各位友友们大家好，最近在家闲着无聊，为了锻炼自己的前端基础，我用前端三大件写了一个时钟。（发篇时本人计算机大二在读，按教学计划学校还未教前端知识。目前全靠自学，故有不足之处，还望同行多多指出）

话不多说，先上效果图。

该图即为我实现的最终效果，更多的优化可以留给大家去探索了。

我的整体思路：

1：画出时钟，这里需要大家思考一下如何才能画出钟表上的数字了，时钟是非常好画的（大家也可以直接用上一张时钟照片当背景，但如果为了考验自己可以自己试着去确定数字）。这里我用的是定位实现的，到了后面，我发现其实用二维动画里面的旋转一定角度更合适。我的时分秒就是如此实现的。

这里就是我实现的部分代码了，根据位置来定位有一点非常不好，那就是你需要自己去计算大致的位置（由于钟表的圆形，使得位置非常难算），耗时且不够准确，所以我还是推荐大家采用我所说的第二种方法——用二维动画里面的旋转一定角度去实现。

2：画出针头并实现其转动与获取系统时间。这里我用到了二维动画的transform属性。将他们的旋转中心设置为底部中心处，再设置一个定时器，每过一秒秒钟增加6度，分钟增加0.1度，时钟增加0.0083333度。同时，在旋转度数达到360时，我会将度数置零。我们都知道，计算机里面数据的存储是会占用空间的，如果一个数字一直增加到很大很大的话，就可能会出现一些错误，在不影响使用的前提下，我们可以适当的做出一些优化。

这里便是我的js部分了。同时我增加了一个一秒的进场动画，以至于时钟开始走动的时候不会那么僵硬。

有不会的或者您有任何高见都可以发表在评论区一起讨论啊！感谢您的观看。

前端页面实现时钟效果相关推荐

前端js实现时钟效果
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>时 ...
快速时钟开始游戏4399html5,HTML5 简单页面实现时钟效果
界面显示: html代码: Document : 时钟 Created on : 2016-5-19, 9:49:29 Author : Administrator --%> JSP Page ...
前端页面实现倒计时效果的几种方法
倒计时的效果在网站或其他平台剪得很多了吧,今天就让我们来看看实现它的几种方法吧! 一 --15分钟倒计时 <html> <head> <meta charset=&quo ...
css3帮你轻松实现圆角效果，不一样的前端页面。
在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...
flask-WTF和sqlalchemy结合使用并实现前端页面登录（综合使用）
文章目录 1.文件结构: 2.实验效果: 3.主文件mani.py: 4.前端页面文件:index.html 5.显示登录成功的前端:login_success.html: 1.文件结构: 2.实验效 ...
后端工程师入门前端页面重构（二）：心法 I
本文由 KnewHow 发表在 ScalaCool 团队博客. 上一篇博客是我们<后端工程师入门前端页面重构>系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零. 那么 ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...
ScrollMagic – 酷毙了！超炫的页面滚动交互效果
ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...

前端页面实现时钟效果

前端页面实现时钟效果相关推荐

最新文章

热门文章