2018-07-29定时器

2018-07-29 本文已影响0人菜鸟亿个

<!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>

2018-07-29定时器

猜你喜欢

热点阅读