JS函数与获取本地时间与倒计时

最新推荐文章于 2022-08-17 09:41:53 发布

原创最新推荐文章于 2022-08-17 09:41:53 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了JavaScript中的内置函数、自定义函数、带参数的函数以及JS的三大对象。详细讲解了数学对象的用法，如生成随机数、取整等。接着，博主展示了如何创建日期对象并获取当前本地时间。通过示例，博主解释了如何在网页中实时显示本地时间，以及如何实现倒计时功能，包括计算时间差、换算月、天、时、分、秒。文章还提供了完整的HTML和JavaScript代码示例。

一、内置函数
eval函数：用于计算表达式的值
alert(eval("1+1"));
isNaN:检查是否是数字，返回值true和false
二、自定义函数
showData();
function shouData(){};
三、带参数的函数
showData();
a=xxx;
function shouData(a){};
四、JS的三大对象
浏览器对象
脚本对象
HTML对象
五、数学对象
1、返回0--1的随机值 Math.random
2、四舍五入取整 Math.round
3、向下取整 Math.floor
4、向上取整 Math.ceil
六、创建日期对象
实例化：var time=newData();
七、获取当前的本地时间
toLocaleTimeString();转化为当前的本地时间
toLocaleDateString();转化年月日
toLocaleString();本地完全时间
setTimeout()计时器但是只运行一次，若想循环使用，需使用递归
八、例子----在网页中显示本地的同步时间
window.onload=function(){
showTime();
}
function showTime(){
var time=new Date();
document.getElementById("content").innerHTML=time.toLocaleString();
setTimeout("shoeTime()",1000);//此处1000为一个循环进行的时间，单位为毫秒
九、例子----在网页中显示目前时间到设定时间的倒计时
<script>
window.onload=function (){
//倒计时反复计算时间差
showTimer();
}
function showTimer()
{
//获取现在的时间
var time_now=new Date();
//时间设置 2017,9,1,0,0,0设置几月就是几月 2017-9-1 0:0:0 这种设置方式少一个月
var time_go=new Date(2018,8,10,0,0,0);
//计算中间的时间差
/*getTime() 获取的是当前时间到1970年之间的总时间*/
var time=parseFloat((time_go.getTime()-time_now.getTime())/1000);
//开始换算月天时分秒毫秒
var mon=parseInt(time/(3600*24*30))
var day=parseInt(time/(3600*24)%30)
var hour=parseInt(time/3600%24)
var min=parseInt(time/60%60)
var sec=parseInt(time%60);
var secmin=parseInt(time*1000%(1000))
if(secmin<10){
secmin="00"+secmin;
}
if(secmin>=10&&secmin<100){
secmin="0"+secmin;
}
document.getElementsByClassName("block")[0].innerHTML=mon+"月";
document.getElementsByClassName("block")[1].innerHTML=day+"天";
document.getElementsByClassName("block")[2].innerHTML=hour+"时";
document.getElementsByClassName("block")[3].innerHTML=min+"分";
document.getElementsByClassName("block")[4].innerHTML=sec+"秒";
document.getElementsByClassName("block")[5].innerHTML=secmin+"毫秒";
setTimeout("showTimer()",1);
}
</script>
<style>
.block{
width: 70px;
white-space: nowrap;
line-height: 50px;
text-align: center;
float: left;
margin-left: 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<h3>距离:2018-9-10 0:0:0 还剩：</h3>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</body>