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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
mocha的时序规则讲解
Feb 16 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
js canvas实现五子棋小游戏
Jan 22 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批量生成缩略图的代码
2008/07/19 PHP
php中动态修改ini配置
2014/10/14 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python实现视频分帧效果
2019/05/31 Python
Python程序控制语句用法实例分析
2020/01/14 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
创业者是否需要商业计划书?
2014/02/07 职场文书
我爱我家教学反思
2014/05/01 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
店铺转让协议书
2014/12/02 职场文书
会议通知
2015/04/15 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
2016年五一促销广告语
2016/01/28 职场文书