jquery制作图片时钟特效


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了jquery制作图片时钟特效的具体代码,供大家参考,具体内容如下

一、生成数字时钟

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
 var oBody=document.body;
 var oP=document.getElementById("time");
 setInterval(fnTime,1000);
 fnTime();
 function fnTime(){
 var myTime=new Date();
 var iHours=myTime.getHours();
 var iMin=myTime.getMinutes();
 var iSec=myTime.getSeconds();
 var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
 oP.innerHTML=str;
 }
 
}
/*将数字转换为字符串且一位数显示为两位,*/
function toTwo(n){
 return n<10?'0'+n:''+n;
}
</script>

<p id="time"></p>

效果:

jquery制作图片时钟特效

二、将数字转换为图片

方法一:

图片名称即数字,用最简单的写法。

用到图片:

jquery制作图片时钟特效

写一个函数strToImg(str)将一个字符串str中每一个数字转换为对应图片,然后动态创建<img>标签。
注意:每次调用需清空<p>标签中的内容。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
 var oBody=document.body;
 var oP=document.getElementById("time");
 setInterval(fnTime,1000);
 fnTime();
 function fnTime(){
 var myTime=new Date();
 var iHours=myTime.getHours();
 var iMin=myTime.getMinutes();
 var iSec=myTime.getSeconds();
 var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
 //oP.innerHTML=str;
 strToImg(str);
 }
 
}
/*将数字转换为字符串且一位数显示为两位,*/
function toTwo(n){
 return n<10?'0'+n:''+n;
}

function strToImg(str){
 var str=str;
 $("#time").empty();
 for(var i=0;i<str.length;i++){
 var oImg=$("<img />");
 oImg.attr("src","images/"+str.charAt(i)+".png");
 $("#time").append(oImg);
 }
}
</script>

<p id="time"></p>

jquery制作图片时钟特效

方法二:【不适用】

如果图片名称不是纯数字,就用一个数组保存起来。

本方法操作dom太多,效率非常低,有时候6个节点显示不全。

因为我本意是查资料看到这样写涉及到图片预加载,以为可以加快效率。尝试了一下,现在看来还是不太懂预加载原理,留坑

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
 var oBody=document.body;
 var oP=document.getElementById("time");
 
 setInterval(fnTime,1000);
 fnTime();
}

function fnTime(){
 var myTime=new Date();
 var iHours=myTime.getHours();
 var iMin=myTime.getMinutes();
 var iSec=myTime.getSeconds();
 var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
 //oP.innerHTML=str;
 strToImg(str);
}

/*将数字转换为字符串且一位数显示为两位,*/
function toTwo(n){
 return n<10?'0'+n:''+n;
}

function strToImg(str){
 var str=str;

 var imageArray=[];
 for(i=0;i<11;i++){
 imageArray[i]=new Image();
 }
 //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应
 imageArray[0].src="images/0.png";
 imageArray[1].src="images/1.png";
 imageArray[2].src="images/2.png";
 imageArray[3].src="images/3.png";
 imageArray[4].src="images/4.png";
 imageArray[5].src="images/5.png";
 imageArray[6].src="images/6.png";
 imageArray[7].src="images/7.png";
 imageArray[8].src="images/8.png";
 imageArray[9].src="images/9.png";
 imageArray[10].src="images/fh.png";
 
 
 $("#time").empty();
 for(var i=0;i<str.length;i++){
 var oImg=imageArray[str.charAt(i)];
 //oImg.attr("src",imageArray[i].src);
 $("#time").append(oImg);
 }
}
</script>

<p id="time"></p>

方法三:

将<img>标签硬编码在html中。

<p id="time"><img src="images/0.png"/><img src="images/0.png"/><img src="images/0.png"/><img src="images/0.png"/><img src="images/0.png"/><img src="images/0.png"/></p>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
 var oBody=document.body;
 var oP=document.getElementById("time");
 
 setInterval(fnTime,1000);
 fnTime();
}

function fnTime(){
 var myTime=new Date();
 var iHours=myTime.getHours();
 var iMin=myTime.getMinutes();
 var iSec=myTime.getSeconds();
 var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
 //oP.innerHTML=str;
 strToImg(str);
}
 var imageArray=[];
 //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应
 imageArray[0]="images/0.png";
 imageArray[1]="images/1.png";
 imageArray[2]="images/2.png";
 imageArray[3]="images/3.png";
 imageArray[4]="images/4.png";
 imageArray[5]="images/5.png";
 imageArray[6]="images/6.png";
 imageArray[7]="images/7.png";
 imageArray[8]="images/8.png";
 imageArray[9]="images/9.png";
 imageArray[10]="images/fh.png";

/*将数字转换为字符串且一位数显示为两位,*/
function toTwo(n){
 return n<10?'0'+n:''+n;
}

function strToImg(str){
 var str=str;
 for(var i=0;i<str.length;i++){
 $("#time").find("img").eq(i).attr("src",imageArray[str.charAt(i)]);
 }
}
</script>

方法四:【推荐】

动态生成<img>标签,且高效的写法。

<p id="time"></p>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
 var oBody=document.body;
 var oP=document.getElementById("time");
 
 setInterval(fnTime,1000);
 fnTime();
}

function fnTime(){
 var myTime=new Date();
 var iHours=myTime.getHours();
 var iMin=myTime.getMinutes();
 var iSec=myTime.getSeconds();
 var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
 //oP.innerHTML=str;
 strToImg(str);
}

/*将数字转换为字符串且一位数显示为两位,*/
function toTwo(n){
 return n<10?'0'+n:''+n;
}

var imageArray=[];
 //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应
 imageArray[0]="images/0.png";
 imageArray[1]="images/1.png";
 imageArray[2]="images/2.png";
 imageArray[3]="images/3.png";
 imageArray[4]="images/4.png";
 imageArray[5]="images/5.png";
 imageArray[6]="images/6.png";
 imageArray[7]="images/7.png";
 imageArray[8]="images/8.png";
 imageArray[9]="images/9.png";
 imageArray[10]="images/fh.png";
 

function strToImg(str){
 var str=str;
 var tempHtml='';
 for(var i=0;i<str.length;i++){
 var imgHtml="<img src="+imageArray[str.charAt(i)]+"/>";
 tempHtml+=imgHtml; 
 }
 $("#time").html(tempHtml);
}
</script>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
You might like
PHP校验ISBN码的函数代码
2011/01/17 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
vue双向数据绑定知识点总结
2018/04/18 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python中查看变量内存地址的方法
2015/05/05 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python中super函数的用法
2017/11/17 Python
基于python的列表list和集合set操作
2019/11/24 Python
python模拟实现分发扑克牌
2020/04/22 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
机械绘图员岗位职责
2013/11/19 职场文书
铁路个人事迹材料
2014/01/30 职场文书
班长自荐书范文
2014/02/11 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
周年庆典答谢词
2015/01/20 职场文书
检讨书模板大全
2015/05/07 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书