温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中怎么图片实时时钟

发布时间:2021-08-10 14:47:45 来源:亿速云 阅读:127 作者:Leah 栏目:开发技术

今天就跟大家聊聊有关JavaScript中怎么图片实时时钟,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

代码:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    p p    {      float: left;      width: 30px;      font-size: 120px;    }    #hours0,#hours1,#minute0,#minute1,#second0,#second1    {      width: 200px;      height: 165px;      background-image: url("img/sztp.jpg");    }  </style></head><body>  <p>    <p id="hours0"></p>    <p id="hours1"></p>    <p>:</p>    <p id="minute0"></p>    <p id="minute1"></p>    <p>:</p>    <p id="second0"></p>    <p id="second1"></p>  </p><script>  var hours0,hours1,minute0,minute1,second0,second1;  var imgPositionList=[];//各数字的位置  init();  function init() {    hours0=document.getElementById("hours0");//小时1    hours1=document.getElementById("hours1");//小时2    minute0=document.getElementById("minute0");//分钟1    minute1=document.getElementById("minute1");//分钟2    second0=document.getElementById("second0");//秒针1    second1=document.getElementById("second1");//秒针2    for(var i=0;i<10;i++){ //循环赋值各数字的位置      if(i<5){       //第一排        imgPositionList.push({x:-i*208,y:0});        continue;      }      imgPositionList.push({x:-(i-5)*208,y:-173}) //第二排    }    console.log( imgPositionList);    imgPositionList.unshift(imgPositionList.pop());//将0 :最末尾的图片 删除 ,返回的值提到最前面。    setInterval(animation,16);  }  function animation() {    var date=new Date();    var hour=date.getHours().toString().split("").map(function (t) { return getNum(t) });    var minutes=date.getMinutes().toString().split("").map(function (t) { return getNum(t) });    var seconds=date.getSeconds().toString().split("").map(function (t) { return getNum(t) });    getDoubleArr(hour);    getDoubleArr(minutes);    getDoubleArr(seconds);    setTimeDiv(hours0,hour[0]);    setTimeDiv(hours1,hour[1]);    setTimeDiv(minute0,minutes[0]);    setTimeDiv(minute1,minutes[1]);    setTimeDiv(second0,seconds[0]);    setTimeDiv(second1,seconds[1]);  }  function getDoubleArr(arr) {    //字符串转化数组    if(arr.length===1) arr.unshift(0);    return arr;  }  function setTimeDiv(elem,num) {   //时间与图片的对应    clone(elem.style,{      backgroundPositionX: imgPositionList[num].x+"px",      backgroundPositionY: imgPositionList[num].y+"px"    });  }  function getNum(str) {    if(isNaN(Number(str))) return str;    return Number(str);  }  function clone(target,source) {    for(var key in source){      target[key]=source[key];    }  }</script></body></html>

看完上述内容,你们对JavaScript中怎么图片实时时钟有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI