jquery制作图片时钟特效资源-CSDN文库

111 浏览量 2021-01-19 15:06:09 上传评论收藏 52KB PDF 举报

资源推荐

资源详情

资源评论

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>

效果：

二、将数字转换为图片二、将数字转换为图片

方法一：方法一：

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

用到图片：

写一个函数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");

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38651445

粉丝: 7
资源: 960

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip