- 资源介绍
- 更新记录
- 安装教程
这是一款简单的自动获取本地时间的css3+js简单数字时钟代码,时分秒上下滚动动画切换网页时钟特效。
js代码
<script> 'use strict'; var size = 86; var columns = Array.from(document.getElementsByClassName('column')); var d = undefined, c = undefined; var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant']; var use24HourClock = true; function padClock(p, n) { return p + ('0' + n).slice(-2); } function getClock() { d = new Date(); return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, ''); } function getClass(n, i2) { return classList.find(function (class_, classIndex) { return i2 - classIndex === n || i2 + classIndex === n; }) || ''; } var loop = setInterval(function () { c = getClock(); columns.forEach(function (ele, i) { var n = +c[i]; var offset = -n * size; ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))'; Array.from(ele.children).forEach(function (ele2, i2) { ele2.className = 'num ' + getClass(n, i2); }); }); }, 200 + Math.E * 10); </script>
猜你喜欢
-
CSS3鼠标滑过按钮动画过滤特效
2021-02-13 -
苹果IOS系统风格JS模态对话框特效
2021-02-13 -
搜索框前漂亮的下拉选择功能
2021-02-07 -
Sticky-js网站滚动左右固定浮动层代码
2021-02-13 -
CSS3太空步舞蹈动画特效
2021-02-13 -
简单好用的一款中国省市三级联动样式
2021-02-13 -
jquery模拟购物车多选结算页面效果
2021-02-07 -
CSS3仿苹果手机iPhone桌面文件夹特效
2021-02-13 -
HTML5 Canvas点击添加橙汁动画特效
2021-02-13 -
html5 svg大海蓝天大雁飞过动画场景特效
2021-02-07
-
HTML5 Canvas创意个性化时钟动画特效
2021-02-13 -
兼容性较好的jQuery检测密码强度代码
2021-02-13 -
CSS3手机端开关按钮勾选关闭切换特效
2021-02-13 -
css3+three.js彩色横向线条移动闪烁背景动画特效
2021-02-07 -
CSS3手机端点击弹出申请信息填写表单代码
2021-02-13 -
背景颜色随机生成9×9乘法表js代码
2021-02-13 -
HTML5鼠标拖动游标滑块条显示百分比代码
2021-02-13 -
非常漂亮的HTML5数据曲线走势图表样式代码
2021-02-13 -
zepto.js手机移动端城市选择插件代码
2021-02-13 -
jQuery网页消除方块小游戏源码
2021-02-13
猜你在找
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!lyebiz@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
优源网 » css3+js简单数字时钟代码
优源网 » css3+js简单数字时钟代码
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 资源不能下载?
- 2021-02-13Hi,初次和大家见面了,请多关照!