<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时器</title>
<style>
a {
background: green;
display: inline-block;
width: 200px;
color: white;
line-height: 50px;
text-align: center;
text-decoration: none;
}
a:hover {
background: #348057;
}
</style>
</head>
<body>
<a href="#" onclick="startTimeOut();">点击我开始倒计时</a>
<input type="text" name="user" value="张三" placeholder="请输入姓名"/>
<p>离新年还有<span id="s1" style="color: red; font-size: 46px">5</span>秒</p>
<script>
/**
* 获取html元素方式
* 1.document.getElementByID(); Object对象
* 2.document.getElementsByTagName(); Array数组
* 3.document.getElementsByName(); Array数组
*
* 改变Html元素内容方式
* 1.表单元素 元素对象.value
* 2.非表单元素 元素对象.innerHTML=""; 或者 元素对象.innerText="";
*
* 改变html元素样式
* <p id=""p1>段落 </p>
* var p = document.getElementById("p1");
* p.innnerHTML = "内容";
* p.style.color = "red";
*
* 变量作用域
* 如果变量定义在函数外，它的作用范围是整个页面
* 如果变量定义在函数内，它只能在函数内起作用
*
* 定时器与循环器
* 语法: window.setTimeout(code,time);
* setTimeout定时器window对象函数 第一个参:.定时器要执行代码(可以是函数名),第二个参数.定时时间，单位是毫秒
*
* 循环器
* 语法 window.setInterval(code,time);
* 第一个参数: 循环执行代码（可以是函数名）,第二个参数： 循环间隔时间，单位是毫秒
*
*/
var time = 5;
var interObj;
var timeoutObj;
function startTimeOut() {
timeoutObj = window.setTimeout('timeout()', 5000); //定时器window对象函数 第一个参:.定时器要执行代码,第二个参数.定时时间，单位是毫秒
interObj = window.setInterval("interVal()",1000); //每隔一秒执行interVal()函数
}
function timeout() {
var aArrays = document.getElementsByTagName("a");
var inputArrays = document.getElementsByTagName("input");
var a = aArrays[0];
var inputElemet = inputArrays[0];
a.innerHTML = "<h1 style='color: red; '>新年快乐!</h1>"; //改变元素内容 内容是:html内容（内容可嵌套html标签）
// a.innerText = "新年快乐!" // 内容是:纯文本内容
inputElemet.value = "李四"; //改变表单元素内容用value属性
window.clearTimeout(timeoutObj);
}
var colorArray = new Array();
colorArray[0] = "red";
colorArray[1] = "blue";
colorArray[2] = "green";
colorArray[3] = "#FF00FF";
colorArray[4] = "#4D4D4D";
colorArray[5] = "#7BFF4B";
function interVal(){
time--;
var spanMiline = document.getElementById("s1");
spanMiline.innerHTML = time;
spanMiline.style.color = colorArray[time];
if(time==0){
window.clearInterval(interObj); //停止倒计时
}
}
</script>
</body>
</html>
网友评论