作业1:进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 500px;
height: 50px;
background-color: gray;
margin-top: 80px;
}
#div2{
position: relative;
width: 0px;
height: 50px;
font-size: 40px;
background-color: red;
}
#span1{
position: relative;
left: 230px;
font-size: 30px;
}
</style>
</head>
<body>
<div id="">
<botton onclick="start()" style="width: 60px;height:30px; background-color: red;">开始</botton>
</div>
<div>
<div id="div1">
<div id=div2></div>
</div>
<span id="span1">
0%
</span>
</div>
</body>
</html>
<script type="text/javascript">
var odiv2 = document.getElementById('div2');
var ospan1 = document.getElementById('span1');
var timer = null;
function start(){
clearInterval(timer);
timer = setInterval(function (){
var kuan = parseInt(getStyle(odiv2, 'width'));
var i = parseInt(ospan1.innerHTML);
//console.log(i);
if (kuan < 500){
kuan = (kuan + 5) + 'px';
console.log(kuan);
odiv2.style.width = kuan;
var kuan1 = parseInt(getStyle(odiv2, 'width'));
console.log(kuan1);
i = (i + 1) + '%';
ospan1.innerHTML = i;
}
},100)
}
var kuan = parseInt(getStyle(odiv2, 'width'));
if (kuan >= 500){
clearInterval(timer);
}
// 获取非行内样式的兼容性写法
function getStyle(obj, name){
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name];
}
</script>
作业2：秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秒表</title>
<style type="text/css">
button{
height: 80px;
font-size: 50px;
/*margin-left: ;*/
}
</style>
</head>
<body>
<div>
<div id="div1" style="height: 200px;font-size: 180px;line-height: 200px;text-align: center;background-color: pink;">00:00</div>
<div id="div2" style="height: 200px;font-size: 180px;line-height: 200px;text-align: center;">
<button onclick="start()">开始</button>
<button onclick="stop1()">暂停</button>
<button onclick="reset1()">重置</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var odiv1 = document.getElementById('div1');
var timer = null;
function start(){
clearInterval(timer);
var odiv1 = document.getElementById('div1');
var str = odiv1.innerHTML;
var a = parseInt(str[0] + str[1]);
var b = parseInt(str[3] + str[4]);
timer = setInterval(function (){
if (a == 60){
a = b = 0;
} else if (b == 99){
a++;
b = 0;
} else{
b++;
}
if (a < 10 && b < 10){
var str1 = '0' + a + ':' + '0' + b;
} else if(a < 10 && b >= 10){
var str1 = '0' + a + ':' + b;
} else if(a >= 10 && b < 10){
var str1 = a + ':' + '0' + b;
} else{
var str1 = a + ':' + b;
}
odiv1.innerHTML = str1
},10)
}
function stop1(){
var odiv1 = document.getElementById('div1');
clearInterval(timer);
}
function reset1(){
var odiv1 = document.getElementById('div1');
clearInterval(timer);
odiv1.innerHTML = '00:00';
}
</script>
作业3：文字时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
当前时间是：<span id="span1"></span>
</div>
</body>
</html>
<script type="text/javascript">
var ospan1 = document.getElementById('span1');
setInterval(function (){
var d = new Date();
var data = d.getDate();
if (parseInt(data) < 10){
data = '0' + data;
}
var month = d.getMonth();
if (parseInt(month) < 10){
month = '0' + (parseInt(month) + 1);
}
var year = d.getFullYear();
var day = d.getDay();
if (parseInt(day) == 0){
day = '星期天';
} else if(parseInt(day) == 1){
day = '星期一';
}else if(parseInt(day) == 2){
day = '星期二';
}else if(parseInt(day) == 3){
day = '星期三';
}else if(parseInt(day) == 4){
day = '星期四';
}else if(parseInt(day) == 5){
day = '星期五';
}else{
day = '星期六';
}
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var str = year + '年' + month + '月' + data + '日 ' + day + ' ' + hours + ':' + minutes + ':' + seconds;
//console.log(str);
ospan1.innerHTML = str;
},1000)
</script>
作业4：处理className兼容问题
作业5：发送短信倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn" style="width: 150px;height: 30px;font-size: 20px;">发送短信</button>
</body>
</html>
<script type="text/javascript">
var obutton = document.getElementById('btn');
var timer = null;
var i = 60;
if (obutton.innerHTML == '发送短信'){
obutton.onclick = function (){
clearInterval(timer);
timer = setInterval(function (){
obutton.innerHTML = i + 's后重新获取';
i--;
if (i <= 0){
clearInterval(timer);
obutton.innerHTML = '发送短信';
i = 60;
}
},1000)
}
}
</script>
