首页 / JAVASCRIPT / 在JS+CSS中如何实现滚动数字时钟

在JS+CSS中如何实现滚动数字时钟

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在JS+CSS中如何实现滚动数字时钟，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5052字，纯文字阅读大概需要8分钟。

内容图文

本篇文章教给大家用JS代码配合CSS样式来实现滚动时钟的动画效果，一起来学习下。

本篇内容我们用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>
<p class="column">
 <p class="num">0</p>
 <p class="num">1</p>
 <p class="num">2</p>
</p>
<p class="column">
 <p class="num">0</p>
 <p class="num">1</p>
 <p class="num">2</p>
 <p class="num">3</p>
 <p class="num">4</p>
 <p class="num">5</p>
 <p class="num">6</p>
 <p class="num">7</p>
 <p class="num">8</p>
 <p class="num">9</p>
</p>
<p class="colon"></p>
<p class="column">
 <p class="num">0</p>
 <p class="num">1</p>
 <p class="num">2</p>
 <p class="num">3</p>
 <p class="num">4</p>
 <p class="num">5</p>
</p>
<p class="column">
 <p class="num">0</p>
 <p class="num">1</p>
 <p class="num">2</p>
 <p class="num">3</p>
 <p class="num">4</p>
 <p class="num">5</p>
 <p class="num">6</p>
 <p class="num">7</p>
 <p class="num">8</p>
 <p class="num">9</p>
</p>
<p class="colon"></p>
<p class="column">
 <p class="num">0</p>
 <p class="num">1</p>
 <p class="num">2</p>
 <p class="num">3</p>
 <p class="num">4</p>
 <p class="num">5</p>
</p>
<p class="column">
 <p class="num">0</p>
 <p class="num">1</p>
 <p class="num">2</p>
 <p class="num">3</p>
 <p class="num">4</p>
 <p class="num">5</p>
 <p class="num">6</p>
 <p class="num">7</p>
 <p class="num">8</p>
 <p class="num">9</p>
</p>
<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该如何实现获取日期段内每天不同的价格

在vue中如何实现图片loading组件

为什么Node.js会成为Web应用开发？

在Node.js中如何获取文件上传进度？

在javascript中如何实现最长公共子序列

关于vue如何实现动态加载图片src

以上就是在JS+CSS中如何实现滚动数字时钟的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在JS+CSS中如何实现滚动数字时钟全部内容，希望文章能够帮你解决在JS+CSS中如何实现滚动数字时钟所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/286696.html

来源：【匿名】

【上一篇】Nuxt.js框架（详细教程）【下一篇】javascript 怎么调用php方法

更多 ►

【在JS+CSS中如何实现滚动数字时钟】教程文章相关的互联网学习教程文章

JavaScript 实现页面中录音功能【代码】【图】

页面中实现录音需要使用浏览器提供的 Media?Recorder API，所以前提是需要浏览器支持 MediaStream Recording 相关的功能。以下代码默认工作在 Chrome 环境中。准备页面首先准备一个页面，其中内容很简单，两个按钮，一个用于录音，一个用于播放。<!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=...

Mongodb使用shell实现与javascript的动态交互【图】

关于利用mongodb的shell执行脚本，这点在以前的文章中有点遗漏；现在在此篇博客中做个补充；一、在命令行中传入脚本文件定义一个javasciprt文件，名称为：script1.js，内容如下： print("I am albert shao in the script1.js") 定义另一个javascript文件，名称为script2,内容如下：print("I like to read and study") 在命令窗口运行得到如下结果：备注：脚本文件必须放到mongo的同目录文件下如果希望使用指定的主机和端口的mon...

JavaScript继承的实现【代码】【图】

JavaScript继承有构造函数继承、原型继承、复制继承、构造函数/原型组合继承等方法，这些继承方法各有特点。眼下最经常使用的就是构造函数/原型组合继承。/*** 实现继承* @param subType {Function} 子类构造函数* @param superType {Function} 父类构造函数*/functioninherit(subType, superType){functionF(){}F.prototype = superType.prototype;var p = new F();p.constructor = subType;subType.prototype = p; }/***...

asp.net 实现动态显示当前时间(不用javascript不考虑开销)

Default.aspx页面：先拉一个ScriptManager控件到页面，然后拉一个UpdatePanel控件。UpdatePanel里面放一个Label用于显示时间，放一个timer控件用于控制时间的更新。注意Label与Label都要放到UpdatePanel控件里面。最后，timer控件的Interval属性设置为1000，让它每1秒执行一次即更新时间。 Default.aspx.cs页面：只需在 protected void Page_Load(object sender, EventArgs e) 里面输入 Label1.Text = DateTime.Now.ToString(); 即...

javascript实现简单的动画功能

//在第二个函数positionMessage中设置初始位置与终点，新建html文件是，元素ID为message。function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != ‘function‘) { window.onload=func;}else{ window.onload = function(){ oldonload(); func(); } }}function positionMessage() { if (!document.getElementById) {return false;} if (!document.get...

JavaScript如何实现继承【代码】【图】

// 原型方式的‘继承‘ function Person(name) { //定义一个Person的构造函数 this.name = name; //添加属性 } Person.prototype.showName=function () { //添加方法 return this.name; }; function Worker(name,job) { Person.apply(this,arguments); //属性的‘继承‘ this.job=job; } Worker.prototype=new Person(); //方法的‘继承‘ Worker.prototype.showJob=function () { return this.job; }; var p1=new Person(‘abc‘)...

iOS中使用JavaScriptCore实现Objective-C和JavaScript的相互调用【代码】【图】

最近看了一个对Github上面编程语言使用统计的排行榜，JavaScript真可以说是一枝独秀，很难想象20年前，这个语言只是浏览器中的装饰性语言，能做的事情也就是一点特效或者检查一下要提交给服务器的表单是否满足要求。今天的JavaScript已经是一个全栈语言，从客户端到服务器无所不在。很多编程语言都提供了跟JavaScript进行交互的接口，这一点在iOS开发中也不例外。 ??iOS7以前，在App中调用JavaScript的方式只有一种，就是通过UIWe...

javascript实现保留两位小数的多种方法

这篇文章主要介绍了javascript实现保留两位小数的多种方法，如果数字的原本小数位数不到两位，那么缺少的就自动补零，感兴趣的小伙伴们可以参考一下第一种方法：javascript实现保留两位小数一位自动补零代码实例:第一种方法介绍一下如何实现对数字保留两位小数效果，如果数字的原本小数位数不到两位，那么缺少的就自动补零，这个也是为了统一的效果，先看代码实例:?12345678910111213141516functionreturnFloat(value){ varvalue=M...

实现简单的网页登录注册功能 (使用html和css以及javascript技术) 没有美化的日后补全【代码】【图】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>账号注册</title><style>select {width: 100px;padding: 5px;font-size:16px;}</style> </head> <body>  <form action="demo01.html"method="post"> <p>账号:<input type="text"name="userCode"required placeholder="请输入账号:...

实现JavaScript forEach【代码】

JavaScript图表库实现密度和抖动图【代码】【图】

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。【慧都网】可免费高速下载Highcharts最新试用版在过去的文章中，我向您展示了如何创建具有抖动的密度图和箱形图以可视化数据分布。你猜怎么了？还有其他吸引人的方法可以显示数...

使用JavaScript实现使用鼠标画线的效果【代码】

<!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=utf-8"/><title>Untitled 1</title><style type="text/css"> .style1 { font-size: x-small;}</style><script type="text/javascript">/**画点 */function makedot(x, y){ pointDi...

65行 JavaScript 代码实现 Flappy Bird 游戏

飞扬的小鸟（Flappy Bird）无疑是2014年全世界最受关注的一款游戏。这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发，形式简易但难度极高的休闲游戏，很容易让人上瘾。　　这里给大家分享一篇这款游戏的 HTML5 版制作教程，借助 Phaser 框架，只需65行 JavaScript 代码即可实现。简单的不能再简单！这才是境界，这才是高手！编程也是一样，几行代码能实现就别去写几十行，显摆什么！到头来只会发现越来越不会...

Javascript实现图片的预加载的完整实现【代码】

图片预加载是web开发中一种应用相当广泛的技术，比如我们在做图片翻转显示等特效的时候，为了让图片在转换的时候不出现等待，我们最好是先让图片下载到本地，然后在继续执行后续的操作。今天我们将来实现一个完整的图片预加载和处理图片加载后执行后续操作的代码。下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){var newimages=[]var arr=(typeof arr!="object")? [arr] : arr //确保参数总...

Java8 Nashorn实现Java调用javascript代码【代码】

最近项目需要，利用java执行动态语言，首先想到的是支持js。1.从打印Hello World开始Java8 引入Nashorn实现javascript调用，比如使用java运行一段js实现“Hello World”打印：package com.iflytek.research.jsdemo;import javax.script.ScriptEngine; import javax.script.ScriptEngineManager; import javax.script.ScriptException;public class NashornTest {public static void main(String[] args) {// 加载nashorn执行引擎Sc...

首页 / JAVASCRIPT / 在JS+CSS中如何实现滚动数字时钟

在JS+CSS中如何实现滚动数字时钟

内容导读

内容图文

内容总结

内容备注

内容手机端

【在JS+CSS中如何实现滚动数字时钟】教程文章相关的互联网学习教程文章

CSS - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程