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 加载并解析XML字符串的代码
Dec 13 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue 组件销毁并重置的实现
Jan 13 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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之第七天
2006/10/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
javascript call方法使用说明
2010/01/11 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
基于python监控程序是否关闭
2020/01/14 Python
python3爬取torrent种子链接实例
2020/01/16 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
高中军训感言500字
2014/02/24 职场文书
土地转让协议书
2014/04/15 职场文书
品牌推广策划方案
2014/05/28 职场文书
大专学生求职信
2014/07/04 职场文书
男性健康日的活动方案
2014/08/18 职场文书
小学教师节活动总结
2015/03/20 职场文书