CSS3和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+js简单数字时钟代码,时分秒上下滚动动画切换网页时钟特效。
本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn
相关文章
16 May 2016
下面小编就为大家带来一篇JS 实现倒计时数字时钟效果【附实例代码】。小编觉得挺不错的,现在分享给大家,也给大家做一个参考。
09 Sep 2023
如何熟练运用CSS3特效提升网页的用户体验随着互联网的发展,网页设计和用户体验成为了网站开发中的重要环节。而CSS3特效的应用,可以为网页增添动感和视觉效果,提升用户体验。本文将介绍几种常见的CSS3特效及其代码示例,帮助开发者更加熟练地运用CSS3特效,提升网页的用户体验。过渡效果(Transition)过渡效果是CSS3中最基本的特效之一,通过改变某个属
18 Jan 2017
这是一款使用jQuery和CSS3来制作的炫酷汉堡包变形动画特效。该特效通过通过jQuery来附加按钮事件,并通过CSS3 transform和animation来制作动画特效。
17 Jan 2017
这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。
19 Jan 2017
这是一款基于SVG过滤器和CSS3制作的可爱小动物动画特效。该特效中使用HTML标签和SVG结合制作动物的外形,并通过CSS3 animation动画来制作动物的各种动画特效。
Hot tools Tags
Hot Tools
CSS文字组合成心形动画特效
CSS文字组合成心形动画特效
CSS3 SVG表白鲜花动画特效
SS3 SVG表白鲜花动画特效是一款情人节动画特效。
CSS的商城网站常用左侧分类下拉导航菜单代码
CSS的商城网站常用左侧分类下拉导航菜单代码
jQuery+CSS3情人节爱心特效
jQuery+CSS3情人节爱心特效是一款情人节悬挂摆动爱心动画特效。
css3汤勺捞起汤圆动画特效
一碗可爱的汤圆表情,汤勺捞起一个汤圆动画特效