JS+CSS实现滚动数字时钟效果


Posted in Javascript onDecember 25, 2017

本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果:

JS+CSS实现滚动数字时钟效果

下面就是这个滚动时钟动画的全部代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3+JS滚动数字时钟代码-三水点靠木</title>
<style>
body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;}
.column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;}
.column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;}
.colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));}
.colon:after{content: ':';}
.num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;}
.num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;}
.num.close{opacity: 0.35;}
.num.far{opacity: 0.15;}
.num.distant{opacity: 0.1;}
</style>
</head>
<body>
<div class="column">
 <div class="num">0</div>
 <div class="num">1</div>
 <div class="num">2</div>
</div>
<div class="column">
 <div class="num">0</div>
 <div class="num">1</div>
 <div class="num">2</div>
 <div class="num">3</div>
 <div class="num">4</div>
 <div class="num">5</div>
 <div class="num">6</div>
 <div class="num">7</div>
 <div class="num">8</div>
 <div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
 <div class="num">0</div>
 <div class="num">1</div>
 <div class="num">2</div>
 <div class="num">3</div>
 <div class="num">4</div>
 <div class="num">5</div>
</div>
<div class="column">
 <div class="num">0</div>
 <div class="num">1</div>
 <div class="num">2</div>
 <div class="num">3</div>
 <div class="num">4</div>
 <div class="num">5</div>
 <div class="num">6</div>
 <div class="num">7</div>
 <div class="num">8</div>
 <div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
 <div class="num">0</div>
 <div class="num">1</div>
 <div class="num">2</div>
 <div class="num">3</div>
 <div class="num">4</div>
 <div class="num">5</div>
</div>
<div class="column">
 <div class="num">0</div>
 <div class="num">1</div>
 <div class="num">2</div>
 <div class="num">3</div>
 <div class="num">4</div>
 <div class="num">5</div>
 <div class="num">6</div>
 <div class="num">7</div>
 <div class="num">8</div>
 <div class="num">9</div>
</div>
<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>
</body>
</html>

注意:其中最上面的是CSS样式内容,大家可以在其中进行调整颜色字体等

<style>
body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;}
.column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;}
.column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;}
.colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));}
.colon:after{content: ':';}
.num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;}
.num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;}
.num.close{opacity: 0.35;}
.num.far{opacity: 0.15;}
.num.distant{opacity: 0.1;}
</style>

JS代码主要就是控制动画的滚动效果,CSS用来控制数字的大小等内容。

本篇内容是三水点靠木的原创,转载请留网址,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 #Javascript
微信小程序录音与播放录音功能
Dec 25 #Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 #Javascript
VueRouter导航守卫用法详解
Dec 25 #Javascript
基于zTree树形菜单的使用实例
Dec 25 #Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 #Javascript
You might like
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
js实现聊天对话框
2020/02/08 Javascript
Django自定义分页与bootstrap分页结合
2021/02/22 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python在非root权限下的安装方法
2018/01/23 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
求职毕业生自荐书
2014/02/08 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
2015年市场部工作总结
2015/04/30 职场文书
雷锋的观后感
2015/06/10 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书