实现目的：实现距离2021年元旦时间倒计时效果
1.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>距离元旦</title>
<style type="text/css">
span{
color: #FF0000;
font-size: 40px;
}
p{
font-size: 40px;
}
div{
position: relative;
left: 500px;
top: 200px;
}
</style>
</head>
<body>
<div>
<h1>距离元旦还有：</h1>
<p></p>
</div>
<script type="text/javascript">
function tow(n) {
return n>0 && n<10 ? n = "0"+n : "" + n;
}
function getDate() {
var p = document.getElementsByTagName("p")[0];
var oDate = new Date(); //获取日期对象
var oldTime = oDate.getTime(); //现在距离1970的时间
var newDate = new Date("2021/1/1 00:00:00");
var newTime = newDate.getTime(); //2021年元旦距离1970年的时间的毫秒数
var second = Math.floor((newTime-oldTime)/1000); //未来时间距离现在的毫秒数
var day = Math.floor(second/86400);
second = second % 86400; //余数代表剩下的秒数
var hour = Math.floor(second/3600); //整数代表小时
second= second % 3600; //剩下的秒数
var minute = Math.floor(second/60);
second=second%60;
p.innerHTML="<span>"+tow(day)+"</span>"+"天"+"<span>"+tow(hour)+" </span>"+"时"+
"<span>"+tow(minute)+"</span>"+"分"+"<span>"+tow(second)+"</span>"+"秒";
// console.log(day);
}
getDate();
setInterval(getDate,1000);
</script>
</body>
</html>⚠️注意
- setTimeout()**和setInterval()**经常被用来处理延时和定时任务。
- setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
- setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
- setTimeout()**只执行一次，而setInterval()**可以多次调用。
- 在用**Math.foor()**向下取整函数，比如还有25.5天。只能说25天，不能说26天。
效果
2.js内置对象小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//Array对象
var fruit = new Array("apple","orange","pear");
console.log(fruit);
console.log(fruit.reverse());
console.log(fruit.sort());
console.log(fruit.join('.'));
console.log(fruit.push("banana")); //输出一共有4个元素
console.log(fruit); //输出一共有4个元素
var fruit2 = new Array("苹果","橘子","梨");
console.log("数组添加到数组" + fruit.concat(fruit2));
//字符串对象
var str = "dst sdkjk";
console.log("字符串长度"+str.length);
console.log("字符串首次出现的位置" + str.indexOf("s")); //有匹配返回下标位置，从0开始
console.log("字符串首次出现的位置" + str.indexOf("ssss")); //指定字符串不存在，返回-1
console.log(str.lastIndexOf("j"));
console.log("截取字符串之间的字符串" + str.substring(2, 8));
console.log("替换旧的字符串" + str.replace(str, "aabbcc"));
console.log("获取内容" + str.toString());
//Math对象
console.log("向上取整" + Math.ceil(-2.64));
console.log("向上取整" + Math.ceil(2.34));
console.log("向下取整" + Math.floor(2.9));
console.log("向下取整" + Math.floor(-2.9));
console.log("取两者之间最小值" + Math.min(2, 6));
console.log("取两者之间最小值" + Math.max(2, 6));
console.log("0---1之间的随机数" + Math.random());
console.log("1---10之间的随机数" +Math.floor(Math.random()*10));
//日期对象
var date = new Date();
//getFullYear() 闰年 (date.getMonth()+1)
console.log("今天是" + date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日"
+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
</script>
</body>
</html>
