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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
python中sets模块的用法实例
2014/09/30 Python
python中元类用法实例
2014/10/10 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
使用python绘制常用的图表
2016/08/27 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
思想品德课教学反思
2014/02/10 职场文书
放假通知格式
2015/04/14 职场文书
python实现简单区块链结构
2021/04/25 Python
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js