js实现会跳动的日历效果(完整实例)

2019-11-19 15:08:58

字体：大中小

来源：转载

供稿：网友

一、简介

编写一个会动的日历，日历上面有年月日，周几，时分秒，效果如下：

年月日，周几，时分秒都会随着系统时间的走动而改变

二、代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <style type="text/css">  *{   margin:0;   padding: 0;    font-size: 0px;   font-family: '微软雅黑';  }  .contain-wrapper{   margin: 0 auto;   padding-top: 70px;   width: 470px;   height: 230px;   background: #000000;   border-radius: 30px;  }  .timer-wrapper p{   font-size: 44px;   color: #ffffff;  }  .year{   width: 470px;   text-align: center;  }  .timer-footer{   width: 460px;   text-align: center;  }  .timer-footer p:nth-child(1){   display: inline-block;  }  .timer-footer p:nth-child(2){   display: inline-block;  } </style></head><body> <div class="contain-wrapper">  <div class="timer-wrapper">   <p class="year"></p>   <div class="timer-footer">    <p></p>    <p></p>   </div>  </div> </div></body><script type="text/javascript">    /*  *这是一个获取当前日期的函数   */  function showLocaleDate(objb){   var str = objb.getFullYear()+"年"+(objb.getMonth()+1)+"月"+objb.getDate()+"日";   return str;  }  var year=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[0];    /*  *这是一个获取星期几的函数   */  function showLocaleWeek(objC){   var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");    var week = objC.getDay();    var weekString = "星期"+ weekArray[week];   return weekString;  }  var wk=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[1];  /*  *这是一个获取当前时间的函数   */  function showLocaleTime(objD){   var hh = objD.getHours();   if(hh<10) hh = '0' + hh;   var mm = objD.getMinutes();   if(mm<10) mm = '0' + mm;   var ss = objD.getSeconds();   if(ss<10) ss = '0' + ss;   var reflash=hh + ":" + mm + ":" + ss;   return reflash;  }  var now=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[2];  function showTime(){   var today=new Date();   year.innerHTML=showLocaleDate(today);   wk.innerHTML=showLocaleWeek(today);    now.innerHTML=showLocaleTime(today);    window.setTimeout("showTime()",1000);  }  showTime();</script></html>

以上这篇js实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：详解http访问解析流程原理

下一篇：打字效果动画的4种实现方法(超简单)