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

2020-11-27 来源：好土汽车网

导读 js实现会跳动的日历效果(完整实例):一、简介编写一个会动的日历，日历上面有年月日，周几，时分秒，效果如下：年月日，周几，时分秒都会随着系统时间的走动而改变二、代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UT

一、简介

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

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

二、代码

<!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实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

显示全文

全部栏目

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