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

一、简介

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

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

二、代码

！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；padd : 0；font-size : 0px字体系列： '微软雅黑；} .容器包装器{ margin 3360 0 auto填充-top : 70px；宽度： 470像素；高度： 230像素背景： # 000000;边界半径： 30px} .timer-wrapper p { font-size : 44px；color: # ffffff}。年{宽度： 470像素文本对齐：中心；} .计时器-页脚{宽度： 460px文本对齐：中心；} .timer-footer p : th-child(1){ display : inline-block；} .timer-footer p : th-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/div/div/body脚本类型=' text/JavaScript '/* *这是一个获取当前日期的函数*/function showlocale date(objb){ var str=objb。getfullyear()'年(objb。GetMountry(1)'月' objb.getDate()'日；返回字符串；} var year=文档。getelementsbyclassname('计时器包装')[0].getElementsByTagName(' p ')[0]；/* *这是一个获取星期几的函数*/函数showLocaleWeek(Objc){ var weekArray=new Array('日', '一', '二', '三', '四', '五', '六');var week=Objc。GetDay()；var weekString='星期周数组[周]；返回weekString} var wk=document。getelementsbyclassname('计时器包装')[0].getElementsByTagName(' p ')[1]；/* *这是一个获取当前时间的函数*/函数showLocaleTime(ObJD){ var hh=ObJD。gethours()；if(hh10)hh=' 0 ' hh；var mm=ObJD。GetMinutes()；if(mm10)mm=' 0 ' mm；var ss=ObJD。GetSequence()；if(ss10)ss=' 0 ' ss；var reflash=hh ' : ' mm ' : ' ss；返回重新刷新；} var now=文档。getelementsbyclassname('计时器包装')[0].getElementsByTagName(' p ')[2]；函数show time(){ var today=new Date()；year.innerHTML=showLocaleDate(今天);wk.innerHTML=showLocaleWeek(今天);now.innerHTML=showLocaleTime(今日);window.setTimeout('showTime()'，1000)；}显示时间()；/script/html以上这篇射流研究…实现会跳动的日历效果（完整实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。