时间属性定时器

作者: pubalabala | 来源:发表于2018-08-21 17:04 被阅读0次

时间属性定时器
NSTimer
H5学习笔记
两个标题的跑马灯第二篇,类似支付宝口碑的封装
2018-07-15
js初识第五节
倒计时的实现方法
JS操作属性定时器和函数
iOS 高效定时器
js背景图片无限滚动

1. 添加事件

添加事件方式，见代码
显示隐藏图片
操作div的display属性，在block和none之间切换即可
this使用
在匿名函数中的this就是当前对象
在onclick=demo(this) 就是当前节点
修改内容
this.innerHTML = 'xxx'
切换背景色
表单内容控制
见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加事件</title>
</head>
<body>
    <div style="width:200px; height:200px; background-color:red" onclick="alert('这是一个div')"></div>
    <div style="width:200px; height:200px; background-color:blue" onclick="test()"></div>
    <div id="div" style="width:200px; height:200px; background-color:green"></div>
</body>
</html>
<script>
function test() {
    console.log('花田里犯了错,说好,破晓前忘掉')
}
var odiv = document.getElementById('div')
// odiv.onclick = function () {
//     console.log('遥远的东方有一条龙')
// }
odiv.onclick = test
</script>

2. onload函数

window的事件，windows.onload = function () {} 是在整个文档加载完毕之后执行，但是自己写的onclick的点击函数不能写到onload里面，因为内部函数只能在内部使用，不能再外部使用
如果实在是想用，
window.lala = function () {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>onload函数</title>
    <script>
        // var a = '岳云鹏'
        // demo()
        // onload是window的事件，意思就是等文档加载完毕之后来执行这个代码
        window.onload = function () {
            // var odiv = document.getElementById('kong')
            // console.log(odiv)
            // odiv.onclick = function () {
            //     this.style.backgroundColor = 'cyan'
            // }

            
        }
        function demo(obj) {
            obj.style.backgroundColor = 'cyan'
        }
        
    </script>
</head>
<body>
    <div id="kong" style="width:300px; height:300px; background-color:pink" onclick="demo(this)"></div>
</body>
<script>
    
    // console.log(a)
    // function demo() {
    //     console.log('你喜欢岳云鹏的相声吗?')
    // }
</script>
</html>
<script>
    // alert(a)
    // demo()

    function test() {
        // function lala() {
        //     console.log('这是一个内部函数')
        // }
        // lala()
        window.lala = function () {
            console.log('这是lala函数')
        }
    }


    test()
    // test.lala()
    lala()
</script>

3. 选项卡

见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
    button {
        width: 200px;
        height: 100px;
        font-size: 40px;
        background-color: pink;
        margin-left: 50px;
        display: inline-block;
    }
    div {
        width: 970px;
        height: 600px;
        font-size: 50px;
        background-color: yellow;
        margin-left: 50px;
        margin-top: 50px;
        display: none;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active" onclick="dudu(this, 0)">周杰伦</button>
    <button onclick="dudu(this, 1)">王力宏</button>
    <button onclick="dudu(this, 2)">张学友</button>
    <button onclick="dudu(this, 3)">刘德华</button>
    <div class="show">菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱</div>
    <div>花田错、龙的传人、唯一</div>
    <div>慢慢、吻别、一千个伤心的理由</div>
    <div>谢谢你的爱、冰雨、天意、忘情水</div>
</body>
</html>
<script>
    // 得到所有的button
    var abuttons = document.getElementsByTagName('button')
    // 得到所有的div
    var adivs = document.getElementsByTagName('div')
    function dudu(obj, index) {
        // 先将所有的button的class属性设置为空
        for (var i = 0; i < abuttons.length; i++) {
            abuttons[i].className = ''
            adivs[i].className = ''
        }
        // 给指定的button添加样式
        obj.className = 'active'
        // 给指定的div添加样式
        adivs[index].className = 'show'
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
    button {
        width: 200px;
        height: 100px;
        font-size: 40px;
        background-color: pink;
        margin-left: 50px;
        display: inline-block;
    }
    div {
        width: 970px;
        height: 600px;
        font-size: 50px;
        background-color: yellow;
        margin-left: 50px;
        margin-top: 50px;
        display: none;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active">王宝强</button>
    <button>马蓉</button>
    <button>王助理</button>
    <button>啤教授</button>
    <div class="show">王宝强、王宝强、王宝强、王宝强、王宝强、王宝强</div>
    <div>马蓉、马蓉、马蓉、马蓉、马蓉、马蓉</div>
    <div>王助理、王助理、王助理、王助理、王助理、王助理</div>
    <div>啤教授、啤教授、啤教授、啤教授</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
var adivs = document.getElementsByTagName('div')
// 循环button数组，给里面每一个button添加点击事件
for (var i = 0; i < abuttons.length; i++) {
    // 给指定的button手动添加一个属性，用来保存是第几个button
    abuttons[i].index = i
    abuttons[i].onclick = function () {
        // 首先清掉所有button和div上面的class
        for (var j = 0; j < abuttons.length; j++) {
            abuttons[j].className = ''
            adivs[j].className = ''
        }
        // 给指定的button添加样式
        this.className = 'active'
        // console.log(i)
        // 给指定的div添加样式
        adivs[this.index].className = 'show'
    }
}
</script>

4. 定时器

定时器：分为两种，一种是周期性定时器，一种是一次性定时器
周期性：每隔5s执行一次函数
一次性：几秒之后执行一次函数，执行完毕定时器结束
var timer = setTimeout(fn, 5000)
5000ms之后执行fn一次。然后结束
销毁定时器 clearTimeout(timer)
计数器
图片消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凤姐消失</title>
</head>
<body>
    <div id="baby">
        <img height="800px" src="meinv.jpg" alt="气质美女">
    </div>
    <button id="btn">点我给你福利</button>
</body>
</html>
<script>
    var odiv = document.getElementById('baby')
    var obtn = document.getElementById('btn')
    // timer就是一个定时器
    var timer = setTimeout(function () {
        odiv.style.display = 'none'
    }, 5000)

    obtn.onclick = function () {
        // 清除timer这个定时器
        clearTimeout(timer)
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计数器</title>
    <style>
    div {
        width: 100%;
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 300px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div id="dudu">0</div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
// 定义一个全局变量，用来保存定时器对象
var timer = null
// 定义一个全局的计数器
var i = 0
odiv.onmouseover = function () {
    timer = setInterval(function () {
        i++
        // 设置div的内容
        odiv.innerHTML = i
    }, 1000)
}

odiv.onmouseout = function () {
    clearInterval(timer)
}
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>周期性定时器</title>
</head>
<body>
    <button onclick="demo()">一行司机上青天</button>
</body>
</html>
<script>
    var timer = setInterval(function () {
        console.log('两个女孩鸣翠柳')
    }, 5000)

    function demo() {
        clearInterval(timer)
    }
</script>

5. 获取非行内样式

IE浏览器获取非行内样式方式
obj.currentStyle['name']
火狐和谷歌获取方式
getComputedStyle(odiv, null)['width']
获取非行内样式的兼容性写法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取非行内</title>
    <style>
    div {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div id="lala"></div>
    <input type="text" id="ip">
    <button onclick="demo()">点我获取div宽度</button>
</body>
</html>
<script>
var odiv = document.getElementById('lala')
function demo() {
    // 获取div的宽度,只能获取行内样式
    // var kuan = odiv.style.width

    // 获取非行内样式
    // var kuan = odiv.currentStyle['width']
    // var kuan = getComputedStyle(odiv, null)['width']
    var kuan = getStyle(odiv, 'width')
    // 显示到input框中
    var oinput = document.getElementById('ip')
    oinput.value = kuan
}

// 获取非行内样式的兼容性写法
function getStyle(obj, name) {
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
</script>

6. BOM操作

window.setTimeout,window.setInterval
window.alert\window.confirm
window.open
window.history(back、go)
history.go(1) 去往前一个网址
history.go(2) 去往后一个网址
history.back() 倒退一个网址
location
href : 读取得到当前的url，设置跳转到指定的url
reload() : 刷新整个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM操作</title>
</head>
<body>
    <button id="btn">点我</button>
    <button id="btn1">摸我</button>
    <button id="btn2">张家辉</button>
    <button id="btn3">张家辉</button>
</body>
</html>
<script>
    var obutton = document.getElementById('btn')
    var obutton1 = document.getElementById('btn1')
    var obutton2 = document.getElementById('btn2')
    var obutton3 = document.getElementById('btn3')
    obutton.onclick = function () {
        ret = window.confirm('今天晚上准备吃什么')
        if (ret == true) {
            console.log('你点击了确定')
        } else {
            console.log('你点击了取消')
        }
    }
    obutton1.onclick = function () {
        window.open('http://www.baidu.com/', '_self')
    }
    obutton2.onclick = function () {
        // window.history.go(2)
        window.history.back()
        // file:///C:/Users/ZBLi/Desktop/1805/day02/14-bom.html
    }
    obutton3.onclick = function () {
        // 得到当前的url
        // console.log(location.href)
        // location.href = 'http://www.baidu.com/'
        location.reload()
    }
</script>

7. select下拉框和oninput事件

onchange : 事件，用户点击下拉框触发
selectedIndex : 用户点击的option的下标，下标从0开始
options : osel.options 可以得到所有的option对象，这是一个数组
input框的oninput事件，只要内容改变，就会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>select下拉框</title>
</head>
<body>
    <select name="刺客" id="sel">
        <option value="1">阿珂</option>
        <option value="2">兰陵王</option>
        <option value="3">孙悟空</option>
        <option value="4">赵云</option>
        <option value="5">李白</option>
    </select>
    <input type="text" id="ip">
</body>
</html>
<script>
    var osel = document.getElementById('sel')
    osel.onchange = function () {
        // alert('我被出发了')
        // alert(osel.selectedIndex)
        alert(osel.options[osel.selectedIndex].innerHTML)
    }

    var oinput = document.getElementById('ip')
    oinput.oninput = function () {
        console.log(this.value)
    }
</script>

practice

实现点击按钮，滚动条走动和百分比走动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进度条</title>
    <style>
        #box{
            width: 300px;
            height: 40px;
            border: 1px solid;
        }
        #co{
            height: 40px;
            width: 0%;
            background-color: green;
        }
    </style>
</head>
<body>
    <button id = "jindu">进度条</button>
    <div id="box">
        <div id="co"></div>
    </div>
    <p id="txt">0%</p>
</body>
</html>
<script>
    var btn = document.getElementById("jindu")
    var persent = document.getElementById("co");
    var tp = document.getElementById("txt")
    var per = 0;
    var state = true;
    console.log(btn)
    btn.onclick = function () {
        if(state == true){
            state = false
        }else{
            state = true
        }
        if(state == false){    
            timer = setInterval(function(){
                if(per<100){
                    per++;  
                    persent.style.width = per+'%';
                    tp.innerHTML = per+"%";
                }
            }, 100)
            
        }else{
            clearInterval(timer)
        }
    }


</script>

实现秒表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>秒表</title>
    <style>
        #box{
            width: 100%;
            text-align: center
        }
        #tim{
            height: 200px;
            width: 100%;
            background-color: pink;
            text-align: center
        }
        p{
            font-size: 100px;
            padding-top: 40px;
        }

        button{
            width: 100px;
            height: 50px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="tim">
            <p id="txt">00 : 00</p>
        </div>
        <div id="btn">
            <button>开始</button>
            <button>暂停</button>
            <button>重置</button>
        </div>
    </div>
</body>
</html>
<script>
    var btn = document.getElementsByTagName("button");
    var text = document.getElementById("txt");
    var min = 0;
    var sec = 0;
    var minstr = "00"
    var secstr = "00"
    var timer;
    btn[0].onclick = function (){
        timer = setInterval(function (){
            sec++;
            if(sec == 60){
                sec = 0;
                min++;
            }
            if(min == 100){
                sec = 0;
                min = 0;
            }
            minstr = min+" :";
            secstr = " "+sec;
            if(sec<10)
                secstr = " 0"+sec;
            if(min<10)
                minstr = "0"+min+" :";
            text.innerHTML = minstr+secstr;
        }, 1000);
    }

    btn[1].onclick = function (){
        clearInterval(timer);
    }

    btn[2].onclick = function (){
        clearInterval(timer);
        text.innerHTML = "00 : 00";
        min = 0;
        sec = 0;
    }
</script>

实现文字时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字时钟</title>
</head>
<body>
    <p id="txt"></p>
</body>
</html>
<script>
    var txt = document.getElementById("txt");
    var wek = {0: "星期天",1: "星期一",2: "星期二",3: "星期三",4: "星期四",5: "星期五",6: "星期六"};
    setInterval(function (){
        var d = new Date();
        var text = "当前时间是 : "+d.getFullYear()+"年"+d.getMonth()+"月"+d.getDate()+"日 "+wek[d.getDay()]+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
        txt.innerHTML = text;
    },1000);
</script>

处理className兼容，自己实现getByClassName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>处理classname兼容</title>
</head>
<body>
    <div id="tang">
        <div class="song yuan qing"></div>
        <div class="song"></div>
        <div class="ming"></div>
    </div>
    <div class="song"></div>
    <div class="song"></div>
</body>
</html>
<script>
    // var adivs = document.getElementsByClassName('song')
    var odiv = document.getElementById('tang')
    // var adivs = odiv.getElementsByClassName('song')

    // console.log(adivs)

    

//*
function getByClassName(obj, classname) {
    // 首先找到所有的标签
    var abiaos = obj.getElementsByTagName('*')
    // 定义一个数组，用来保存符合要求的节点对象
    var arr = []
    // 遍历每一个标签，将标签的内容得到
    for(var i = 0; i < abiaos.length; i++) {
        // 得到当前对象的class
        var leiming = abiaos[i].className
        // 将leiming这个字符串按照空格切割
        var arr1 = leiming.split(' ')
        // 遍历所有的类名，判断有没有classname, 有的话就要这个节点，没有就不要这个节点
        for (var j = 0; j < arr1.length; j++) {
            if (arr1[j] == classname) {
                arr.push(abiaos[i])
            }
        }
    }
    return arr
} //*/

console.log(getByClassName(odiv, 'song'))

// console.log('song'.split(' '))
</script>

短信倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>短信倒计时</title>
    <style>
        #txt{
            width: 200px;
            height: 40px;
            border: 1px solid;
            /* position: absolute; */
            float: left;
        }
        #btn{
            /* left: 208px; */
            height: 43px;
            /* position:absolute; */
            background-color: #fff;
            border: 0;
            float: left;
            font-size: 20px;
        }
        #btn:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <input id="txt" type="text">
        <button id="btn" type="button">发送验证码</button>
    </div>
</body>
</html>
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function (){
        var sec = 60;
        btn.disabled = "disabled";
        var timer = setInterval(function (){
            sec--;
            btn.innerHTML = sec+"秒后重试"
            if(sec == 0){
                clearInterval(timer)
                btn.disabled = ""
            }
                
        },1000)
    }
</script>

时间属性定时器
1. 添加事件添加事件方式，见代码显示隐藏图片操作div的display属性，在block和none之间切换即...
NSTimer
NSTimer的属性返回Boolean 表示当前的timer是否还有效。定时器的触发时间。如果定时器已经无效，...
H5学习笔记
CSS clear 属性指定段落的左侧或右侧不允许浮动的元素：属性值 js 定时器 js 定时器有以下两个方法...
两个标题的跑马灯第二篇,类似支付宝口碑的封装
封装跑马灯 UI布局属性定时器动画赋值顺序
2018-07-15
1.GCD的定时器声明属性时需要使用类型，无“*”号其他操作注意：一定要保持对定时器的引用，否则，定时器就向一...
js初识第五节
通过js来操作dom节点的属性定时器setTimeout的使用和清除定时器的异步特性 window的locat...
倒计时的实现方法
方法一：NSTimer 1> 创建定时器属性 @property(strong,nonatomic)NSTime...
JS操作属性定时器和函数
JS操作style属性 JS操作class JS操作括号属性一、定时器分类 setTimeout 只执行一次的定...
iOS 高效定时器
一、中心化管理NSTimer定时器日常使用中如果我们将NSTimer定时器作为视图控制器的属性，那么在这个视图控...
js背景图片无限滚动
运用setInterval方法设置定时器，并用offsetTop 获取对象相对于版面或由 offsetTop 属性...

时间属性定时器

1. 添加事件

2. onload函数

3. 选项卡

4. 定时器

5. 获取非行内样式

6. BOM操作

7. select下拉框和oninput事件

practice

相关文章

时间属性定时器

NSTimer

H5学习笔记

两个标题的跑马灯第二篇,类似支付宝口碑的封装

2018-07-15

js初识第五节

倒计时的实现方法

JS操作属性定时器和函数

iOS 高效定时器

js背景图片无限滚动

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

时间 属性 定时器

1. 添加事件

2. onload函数

3. 选项卡

4. 定时器

5. 获取非行内样式

6. BOM操作

7. select下拉框和oninput事件

practice

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

时间属性定时器