电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。
先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示：
<div id="clock" class="clock_con"></div><!--基础时钟元素-->本实例电子时钟的格式设定为 (yyyy-MM-dd hh:mm:ss) ，用js来组合一个简单的时钟字符串放到clock元素中。
本实例把时钟功能封装到函数中，所以先创建一个creatClock函数，在creatClock中再来编写具体代码。
建议在完成某一个前端功能时，应先分析功能的具体操作。再根据具体操作把实现功能的方法分成多个步骤，接下来一个步骤一个步骤去完成它。来看一下用js组合这样一串字符，需要哪些步骤：
1 调用date对象，获取计算机的本地时间
1.1 调用date对象
1.2 获取当前年份
1.3 获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份
1.4 获取当前日期
1.5 获取当前小时
1.6 获取分钟
1.7 获取秒数
2. 格式化获取到的时间数据
2.1 单数字前添加字符串0，用以符合时钟格式
2.2 组合时间数据为字符串
3. 在clock元素中实时显示时间
3.1 获取clock元素
3.2 修改clock元素中的时间
3.3 使用定时器实时更新时间
具体代码如下：
function fnCreatClock(){
//声明时间相关变量
var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
//1 获取计算机本地时间
function fnGetDate(){
//1.1 调用date对象
dLocal = new Date();
//1.2 获取当前年份
nYear = dLocal.getFullYear();
//1.3 获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份
nMonth = dLocal.getMonth() + 1;
//1.4 获取当前日期
nDate = dLocal.getDate();
//1.5 获取当前小时
nHours = dLocal.getHours();
//1.6 获取分钟
nMinutes = dLocal.getMinutes();
//1.7 获取秒数
nSeconds = dLocal.getSeconds();
}
//2.1 封装一个函数，用于把单数字前添加字符串0，例如1改为01
function fnToDouble(num){
//声明一个返回结果
var sResult = '';
if(num<10){
//判断数字小于10则是单数字，需要在前面添加字符串0
sResult = '0' + num;
}else{
//数字为10以上转换为字符串
sResult = '' + num;
}
//返回格式化后的字符串
return sResult;
}
function fnFormatDate(){
//2.2 组合时间数据为字符串。本实例主要针对初学者，所以这里用的是最简单的格式化方式，即把所有数据用+号相连
return nYear + '-' + fnToDouble(nMonth) + '-' + fnToDouble(nDate) +
' ' + fnToDouble(nHours) + ':' + fnToDouble(nMinutes) + ':' + fnToDouble(nSeconds);
}
//3.1 获取clock元素
var eClock = document.getElementById('clock');
//获取时间
fnGetDate();
//3.2 修改clock元素中的时间
eClock.innerHTML = fnFormatDate();
//使用定时器实时更新时间
setInterval(function(){
//3.3 每秒更新时间
fnGetDate();
//3.3 修改clock元素中的时间
eClock.innerHTML = fnFormatDate();
},1000);
}
fnCreatClock();此时的效果如图所示：
现在做出来的时钟看起来感觉有点简陋，也可以尝试把数字换成图片，这样所呈现效果就会好很多。这里暂时忽略日期部分，只为时间部分添加图片效果，还是先看一下需要哪些html元素，代码如下：
<div id="imgClock" class="clock_container"><!--图片时钟元素-->
<div id="imgHours" class="img_box">
<span class="img_0"></span>
<span class="img_0"></span>
</div>
<div class="img_point"></div>
<div id="imgMinutes" class="img_box">
<span class="img_0"></span>
<span class="img_0"></span>
</div>
<div class="img_point"></div>
<div id="imgSeconds" class="img_box">
<span class="img_0"></span>
<span class="img_0"></span>
</div>
</div>还需要准备0-9共10张图片，可以自己制作类似效果的数字图片。css代码可以自己根据需要编写，也可以复制以下代码使用：
.clock_container{
margin-top:60px;
font-size:0;
text-align:center;
}
.clock_container div{
display:inline-block;
}
.clock_container .img_box span{
display:inline-block;
width:80px;
height:100px;
margin:0 2px;
border-radius:8px;
background-color:#77a6b6;
}
.clock_container .img_0{
background:url(img/img_0.png) no-repeat;
}
.clock_container .img_1{
background:url(img/img_1.png) no-repeat;
}
.clock_container .img_2{
background:url(img/img_2.png) no-repeat;
}
.clock_container .img_3{
background:url(img/img_3.png) no-repeat;
}
.clock_container .img_4{
background:url(img/img_4.png) no-repeat;
}
.clock_container .img_5{
background:url(img/img_5.png) no-repeat;
}
.clock_container .img_6{
background:url(img/img_6.png) no-repeat;
}
.clock_container .img_7{
background:url(img/img_7.png) no-repeat;
}
.clock_container .img_8{
background:url(img/img_8.png) no-repeat;
}
.clock_container .img_9{
background:url(img/img_9.png) no-repeat;
}
.clock_container .img_point{
width:60px;
height:100px;
background:url(img/img_point.png) no-repeat center;
}按照惯例，完成功能前先整理步骤。这里再多添加一个步骤，在imgClock元素中来完成图片美化后的时钟效果，步骤如下：
4. 在imgClock元素中，用图片作为背景实时修改时间
4.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
4.2 根据时间修改时、分、秒元素的class，用来改变背景样式
4.3 使用定时器更新元素背景
修改后的代码如下：
function fnCreatClock(){
//声明时间相关变量
var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
//1 获取计算机本地时间
function fnGetDate(){
//1.1 调用date对象
dLocal = new Date();
//1.2 获取当前年份
nYear = dLocal.getFullYear();
//1.3 获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份
nMonth = dLocal.getMonth() + 1;
//1.4 获取当前日期
nDate = dLocal.getDate();
//1.5 获取当前小时
nHours = dLocal.getHours();
//1.6 获取分钟
nMinutes = dLocal.getMinutes();
//1.7 获取秒数
nSeconds = dLocal.getSeconds();
}
//2.1 封装一个函数，用于把单数字前添加字符串0，例如1改为01
function fnToDouble(num){
//声明一个返回结果
var sResult = '';
if(num<10){
//判断数字小于10则是单数字，需要在前面添加字符串0
sResult = '0' + num;
}else{
//数字为10以上转换为字符串
sResult = '' + num;
}
//返回格式化后的字符串
return sResult;
}
//获取时间
fnGetDate();
//4.1 获取图片背景的小时元素
var eImgHours = document.getElementById('imgHours');
//获取小时的第一个元素
var eHours1 = eImgHours.getElementsByTagName('span')[0];
//获取小时的第二个元素
var eHours2 = eImgHours.getElementsByTagName('span')[1];
//4.1 获取图片背景的分钟元素
var eImgMinutes = document.getElementById('imgMinutes');
//获取分钟的第一个元素
var eMinutes1 = eImgMinutes.getElementsByTagName('span')[0];
//获取分钟的第二个元素
var eMinutes2 = eImgMinutes.getElementsByTagName('span')[1];
//4.1 获取图片背景的秒元素
var eImgSeconds = document.getElementById('imgSeconds');
//获取秒的第一个元素
var eSeconds1 = eImgSeconds.getElementsByTagName('span')[0];
//获取秒的第二个元素
var eSeconds2 = eImgSeconds.getElementsByTagName('span')[1];
// 4.2 根据时间修改时、分、秒元素的class，用来改变背景样式
function fnChangeImgBg(){
eHours1.className = 'img_' + fnGetImgNum(nHours,0);
eHours2.className = 'img_' + fnGetImgNum(nHours,1);
eMinutes1.className = 'img_' + fnGetImgNum(nMinutes,0);
eMinutes2.className = 'img_' + fnGetImgNum(nMinutes,1);
eSeconds1.className = 'img_' + fnGetImgNum(nSeconds,0);
eSeconds2.className = 'img_' + fnGetImgNum(nSeconds,1);
}
//此函数用来计算根据当前时间的数字
function fnGetImgNum(num,bit){
//声明一个返回结果
var nResult = 0;
//判断是个位还是十位，0代表十位，1代表个位
if(bit===0){
//使用Math.floor可以向下取整，即不管是0.1还是0.9，都是取整数0。此方法用来获取时间的十位
nResult = Math.floor(num/10);
}else{
//通过fnToDouble函数把时间格式化双字符串，再取后面一个字符获取个位，前面的+号用于转换为数字
nResult = +fnToDouble(num).slice(1);
}
return nResult;
}
fnChangeImgBg();
//使用定时器实时更新时间
setInterval(function(){
//3.3 每秒更新时间
fnGetDate();
fnChangeImgBg(); //4.3 使用定时器更新元素背景
},1000);
}
fnCreatClock();此时的效果比单独的文字还是会增色不少，如图所示：
我想要求效果再漂亮一点，让图片不是很突兀的改变，而是有一个滚动的动画。要实现这样的效果，图片需要改成一张0-9的竖形排列图，每个数字的高度要和时钟元素高度一致。再通过修改元素背景图片的位置，即可产生滚动的动画效果。
此效果需要的html元素如下所示：
<div id="animationClock" class="clock_container"><!--动画时钟元素-->
<div id="animationHours" class="animation_box">
<span></span>
<span></span>
</div>
<div class="img_point"></div>
<div id="animationMinutes" class="animation_box">
<span></span>
<span></span>
</div>
<div class="img_point"></div>
<div id="animationSeconds" class="animation_box">
<span></span>
<span></span>
</div>
</div>在css里面给每一个元素加上同一个背景图片，需要加上transition过渡样式用来产生动画效果，如下所示：
.clock_container .animation_box span{
display:inline-block;
width:80px;
height:100px;
margin:0 2px;
border-radius:8px;
background-color:#77a6b6;
background-image:url(img/img_all.png);
background-repeat:no-repeat;
transition:.2s;
}再随着时间改变给每一个时间元素修改背景图片的位置，即修改background-repeat-y的样式即可。按照惯例，还是先列步骤：
5. 在animationClock元素中，滚动动画显示时钟的实时变化
5.1 分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素
5.2 根据时间修改时、分、秒元素的背景图片位置
5.3 使用定时器更新元素背景图片位置
修改后的代码如下：
function fnCreatClock(){
//声明时间相关变量
var dLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;
//1 获取计算机本地时间
function fnGetDate(){
//1.1 调用date对象
dLocal = new Date();
//1.2 获取当前年份
nYear = dLocal.getFullYear();
//1.3 获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份
nMonth = dLocal.getMonth() + 1;
//1.4 获取当前日期
nDate = dLocal.getDate();
//1.5 获取当前小时
nHours = dLocal.getHours();
//1.6 获取分钟
nMinutes = dLocal.getMinutes();
//1.7 获取秒数
nSeconds = dLocal.getSeconds();
}
//2.1 封装一个函数，用于把单数字前添加字符串0，例如1改为01
function fnToDouble(num){
//声明一个返回结果
var sResult = '';
if(num<10){
//判断数字小于10则是单数字，需要在前面添加字符串0
sResult = '0' + num;
}else{
//数字为10以上转换为字符串
sResult = '' + num;
}
//返回格式化后的字符串
return sResult;
}
//获取时间
fnGetDate();
//此函数用来计算根据当前时间的数字
function fnGetImgNum(num,bit){
//声明一个返回结果
var nResult = 0;
//判断是个位还是十位，0代表十位，1代表个位
if(bit===0){
//使用Math.floor可以向下取整，即不管是0.1还是0.9，都是取整数0。此方法用来获取时间的十位
nResult = Math.floor(num/10);
}else{
//通过fnToDouble函数把时间格式化双字符串，再取后面一个字符获取个位，前面的+号用于转换为数字
nResult = +fnToDouble(num).slice(1);
}
return nResult;
}
//5.1 获取动画时钟的小时元素
var eAnimationHours = document.getElementById('animationHours');
//获取小时的第一个元素
var eHours3 = eAnimationHours.getElementsByTagName('span')[0];
//获取小时的第二个元素
var eHours4 = eAnimationHours.getElementsByTagName('span')[1];
//5.1 获取动画时钟的分钟元素
var eAnimationMinutes = document.getElementById('animationMinutes');
//获取分钟的第一个元素
var eMinutes3 = eAnimationMinutes.getElementsByTagName('span')[0];
//获取分钟的第二个元素
var eMinutes4 = eAnimationMinutes.getElementsByTagName('span')[1];
//5.1 获取动画时钟的秒元素
var eAnimationSeconds = document.getElementById('animationSeconds');
//获取秒的第一个元素
var eSeconds3 = eAnimationSeconds.getElementsByTagName('span')[0];
//获取秒的第二个元素
var eSeconds4 = eAnimationSeconds.getElementsByTagName('span')[1];
// 5.2 根据时间修改时、分、秒元素的背景图片位置
function fnAnimationBg(){
eHours3.style.backgroundPositionY = -fnGetImgNum(nHours,0) * 100 + 'px';
eHours4.style.backgroundPositionY = -fnGetImgNum(nHours,1) * 100 + 'px';
eMinutes3.style.backgroundPositionY = -fnGetImgNum(nMinutes,0) * 100 + 'px';
eMinutes4.style.backgroundPositionY = -fnGetImgNum(nMinutes,1) * 100 + 'px';
eSeconds3.style.backgroundPositionY = -fnGetImgNum(nSeconds,0) * 100 + 'px';
eSeconds4.style.backgroundPositionY = -fnGetImgNum(nSeconds,1) * 100 + 'px';
}
fnAnimationBg();
//使用定时器实时更新时间
setInterval(function(){
//3.3 每秒更新时间
fnGetDate();
//5.3 使用定时器更新元素背景图片位置
fnAnimationBg();
},1000);
}
fnCreatClock();也许vue+css3做交互特效更简单
关于vue+css3开发的特效，以及和javascript+css3的对比，就说到这里了，希望这三个小实例，能帮到大家了解下应该怎么使用vue+css3开发特效的。
纯 CSS 创作出平滑的层叠海浪特效
这里的波浪只是侧面的，利用几个平面一部分弧旋转得到。定义 dom，容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果
js实现图片放大镜特效
在平时网上商城购物时，我们能够通过放大镜效果来使我们看图片能够更加的清楚，今天我就来给大家分享一下我学习的放大镜特效
基于 HTML5 Canvas 实现的文字动画特效
文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读
只需三步，实时多边形折射
在本教程中，您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时，无论使用某种3D软件还是使用WebGL进行实时显示，始终都必须为其分配材料以使其可见并具有所需的外观。
纯CSS3仿网易云孤独星球特效
今天收听网易云音乐时看到孤独星球的特效，于是就顺手搬到这里了。孤独星球特效本身没有什么难点，但如果要加入音轨控制星球运动频率就有点麻烦了
原生JS实现旋转木马轮播图特效
当用户点击左右箭头时，让数组进行相应变化（如果点击右箭头，就删除数组最后那个元素，把它添加到最前边；如果点击左箭头，就删除数组最前边那个元素，把它添加到最后边），改变完数组再调用一下move()函数（让图片轮播）
纯css3实现二维码扫描特效
第一步，实现网格背景：第二部实现扫码线以及渐变背景特效，四角特效就是四个宽高相等的正方形，分别设置边框即可。设置扫描动画
canvas+js实现数字雨特效【字符下落特效】
用dropLine这个列表来记录绘制过程，dropLine[i]的意义是表示在第i列，第dropLine[i]行绘制！filltext()是canvas中的方法，这里的三个参数分别对应：内容，横坐标，纵坐标。
css按钮悬停特效
本文给大家介绍几款按钮的鼠标悬停效果，是纯CSS实现的，鼠标移上按钮后，按钮会随之发生变化。这种效果使用非常广泛，非常多的网页都用上了这个效果。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!