JS-小案例关于时间--实时时间

JS小案例关于时间–实时时间

界面设置和实现功能

用到的知识点

JS中日期对象方法

          var  year=myDate.getFullYear();//(例如2019)var  month=myDate.getMonth()+1;//(获取当前月份0-11)var  date=myDate.getDate();//(获取当前日1-31)var  day=myDate.getDay();//(获取当前时间 注意  是数字0-6  0代表星期天)var  weekDay=[       //day (0-6) 0指的是星期天"星期天","星期一","星期二","星期三","星期四","星期五","星期六"];var hour=myDate.getHours();//获取小时数0-23var minute=myDate.getMinutes(); //获取当前分钟数0-59var second=myDate.getSeconds();//获取当前秒数 0-59getTime();//获取当前秒数  (从1970.1.1开始毫秒数)html

定时器
setInterval(function,time);
第一个参数是函数
第二个参数是时间
过多少秒执行一次函数
```
 注意点：1s=1000ms
```

思路

根据以上的这些关于日期对象的方法获取时间

其中有点点思考的是

星期几的获取
将通过getDay()方法获取来的数字（0-6）理解为函数的索引
分钟还有秒钟需要当<10时前面加一个0 例如23:05:08
定义一个函数假如参数小于10那么就在前面加个0
定时器
将获取好的时间封装一个函数
规定1000ms刷新一次

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>获取实时时间</title><style type="text/css">*{margin:0;padding:0;}#dv{height:50px;width:300px;margin:100px auto;border:1px solid aqua;text-align: center;}span{display:inline-block;line-height:50px;height:50px;}</style></head><body><div id="dv"><span></span></div><script type="text/javascript">function onchange(num){if(num<10)return num='0'+num;  //+是用来连接  不要理解成字符型数据和数字相加else return num;}setInterval(function(){var  myDate=new Date();var  year=myDate.getFullYear();//(例如2019)var  month=myDate.getMonth()+1;//(获取当前月份0-11)var  date=myDate.getDate();//(获取当前日1-31)var  day=myDate.getDay();//(获取当前时间 注意  是数字0-6  0代表星期天)var  weekDay=[       //day (0-6) 0指的是星期天"星期天","星期一","星期二","星期三","星期四","星期五","星期六"];var hour=myDate.getHours();//获取小时数0-23var l=myDate.getMinutes(); //获取当前分钟数0-59var k=myDate.getSeconds();//获取当前秒数 0-59//补充一个  getTime();//获取当前秒数  (从1970.1.1开始毫秒数)//输入到页面上var dv=document.getElementById("dv");var span=document.getElementsByTagName("span");span[0].innerHTML=year+"年"+month+"月"+date+"日"+"    " +weekDay[day]+hour+":"+onchange(l)+":"+onchange(k);console.log(onchange(k));},1000);</script></body>
</html>

JS-小案例关于时间--实时时间相关推荐

JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...
JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
js小案例：实现选项卡功能
js小案例:实现选项卡功能 html部分代码 <button>1</button><button>2</button><button>3&l ...
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...
[突发奇想的JS小案例] 2 重力模拟
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示可以利用鼠标拖动舞台中的方块,松开鼠标 ...
[突发奇想的JS小案例] 1 捉苍蝇
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示这个小方块很像苍蝇,每当靠近就快速飞走 ...
js小案例-九宫格抽奖
目录一.案例介绍二.效果展示三.代码展示四.源码下载地址一.案例介绍案例主要通过设置定时器setInterval和改变className值实现转动,设置延时器setTimeout清除定时器 ...
案例：倒计时 js小案例
案例:倒计时倒计时展示案例动图展示: 代码展示: <p>案例:倒计时</p> <div><span class="hour">1 ...
js小案例：使用location.href自动跳转页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

JS-小案例关于时间--实时时间

JS小案例关于时间–实时时间

界面设置和实现功能

用到的知识点

思路

JS-小案例关于时间--实时时间相关推荐

最新文章

热门文章

JS-小案例 关于时间--实时时间

JS小案例 关于时间–实时时间

界面设置和实现功能

用到的知识点

思路

JS-小案例 关于时间--实时时间相关推荐

最新文章

热门文章

JS-小案例关于时间--实时时间

JS小案例关于时间–实时时间

JS-小案例关于时间--实时时间相关推荐