知识点
DOM操作
定时器函数
格式化时间
步骤
一、获取操作对象DOM标签
二、格式化时间的函数方法
1、设定倒计时时间长度:天、时、分、秒
2、计算该时间长度的总秒数:时*3600+分*60+秒;
3、格式化时间:时=总秒数/3600;分=(总秒数%3600)/60;
秒=总秒数/60;【时和分都要向下取整(Math.floor())】
4、把得到的时分秒,进行三目运算。当<10,与字符串“0”拼接
三、字符串拼接函数
1、调用格式化时间的函数
2、定义一个字符串str
3、用字符串拼接的方法(str +=)连接标签
4、在父元素中显示str【dom.innerHTML = str;】
四、计时器函数
1、倒计时的总秒数进行自减
2、条件判断:当倒计时总秒数<0时清除计时器
3、调用字符串拼接函数
运行结果
script代码段
<script>
//需求:倒计时
//思路:DOM操作,定时器,格式化时间
//步骤
//获取DOM标签
var box = document.getElementById("box");
//定时器变量
var time = null;
//格式化时间
//秒数转 小时、、分钟、、秒钟
//2个小时后,活动结束
//2 * 60 * 60 = 7200
//7199
//7198
function downTime(seconds){//秒数 形参(代替实参的变量)
//console.log(seconds);
//声明时分秒变量
var h = 0;
var m = 0;
var s = 0;
//计算
//1小时 = 3600秒
//1分钟 = 60秒
//除法运算
//取余(剩余时间)
//小时、分钟、秒钟
h = Math.floor(seconds/3600);
m = Math.floor(((seconds % 3600) / 60));
s = Math.floor(seconds % 60)
h = h < 10? "0" + h : h;
m = m < 10? "0" + m : m;
s = s < 10? "0" + s : s;
console.log(h,m,s);
//返回时分秒
return{
//冒号左面是属性,右边是属性值
//把变量值赋给属性
//返回的是属性
h:h,
m:m,
s:s
}
}
//var time = downTime(7197);//实参
console.log(time);
var total = 2 * 60 + 60;
function init(){
//获取格式化的时间
var obj = downTime(total);
console.log(obj);
//对象通过键值key存取数据
//字符串拼接
var str = "<b>3分钟倒计时</b>"
str += "<span>"+obj.h+"</span>"
str += "<i>:</i>"
str += "<span>"+obj.m+"</span>"
str += "<i>:</i>"
str += "<span>"+obj.s+"</span>"
box.innerHTML = str;
}
//调用初始化函数
init();
//计时器函数
timer = setInterval(function(){
total--;
if(total<0){
clearInterval(timer)
return;
}
//字符串拼接,写入倒计时空格
init();
},1000)
</script>
Body代码段
<body>
<div class="box" id="box">
<b>3分钟倒计时</b>
<span>00</span>
<i>:</i>
<span>00</span>
<i>:</i>
<span>00</span>
</div>
</body>