9-16 h5总结清除定时器，键盘事件，时间表示

最新推荐文章于 2022-08-08 14:13:16 发布

小菜鸟码住

最新推荐文章于 2022-08-08 14:13:16 发布

阅读量280

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/100877062

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Javascript
简介
基于对象和事件驱动的脚本语言
动态、弱类型
特点：动态（声明时无需指定变量类型）
弱类型（可以给变量赋值成任意类型）
Javascript包括：
ECMAscript（基本语法）
DOM：（文档对象模型）
BOM：（浏览器对象模型）
事件类型：onclick onmouseover onmouseout
onmousemove onmouseup onmousedown
绑定事件：
三要素：绑定的元素、事件类型、事件处理函数
事件流：事件冒泡事件捕获
利用事件冒泡的特性，可以实现事件委托（即当需要给子元素绑定的时候，给父元素绑）
阻止事件冒泡：StopIteration
事件委托

window下的对象
history
location
screen
navigater
document
window对象下的方法
alert()
close
open
setlnterval()
setTimeout()
clearlnterval()
clearTinmeout()
onload

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
    <script>
        // window对象是最根上的对象
        // console.log(window);
        // window对象下的方法
        // alert();
        // var a = 100;//声明的变量是加到window对象上的属性
        // console.log(window.a);
        window.onload = function(){
            var btn = document.getElementById('btn');
            var stop = document.getElementById('stop');
            var id;
            btn.onclick = function(){
                // var flag = confirm('你确定要放弃H5吗');
                // console.log(flag);
                // 打开指定网址的窗口
                // var win = open('https://www.baidu.com/');
                // 延迟执行
                // setTimeout(function(){
                //     win.close();
                // },3000)
                var i = 16;
                // 周期执行
                id = setInterval(function(){
                    // console.log(i++);
                    // btn.style.fontSize = i++ + 'px';
                    btn.style.marginLeft = i++ + 'px';
                },50);
            }
            stop.onclick = function(){
                // 清除定时器
                clearInterval(id);
            }
        }
    </script>
</head>
<body>
    <button id="btn">开始</button>
    <button id="stop">停止</button>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
</head>
<body>
    <input id="msg" type="text">
    <ul id="list">
        <li>111<button>删除</button></li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // 1、先获取要操作的标签
        var inp = document.getElementById('msg');
        var list = document.getElementById('list');
        // 2、给input绑定键盘事件
        // 键盘事件：onkeydown   onkeyup
        inp.onkeydown = function(e){
            // 判断是否是回车键
            if(e.keyCode===13){
                // 创建一个li标签
                var li = document.createElement('li');
                // var btn = document.createElement('button');
                // 给li里赋值成input框输入的内容
                li.innerHTML = inp.value+'<button>删除</button>';
                // btn.innerHTML = '删除';
                // 添加到指定的元素里
                list.appendChild(li);
                // li.appendChild(btn);
                inp.value = '';
                // ul中添加一个li标签
                // list.innerHTML += '<li>'+inp.value+'</li>';
            }
        }
        // 事件流：事件冒泡  事件捕获
        // 
        
        
        
        
        // 先获取li
        var lis = list.children;
        // 给li绑定点击事件
        // for(var i=0;i<lis.length;i++){
            // lis[i].onclick = function(e){
                // 阻止事件冒泡
                // e.stopPropagation();
                // list.removeChild(this);
                // console.log('li点击了');
            // }
        // }
        // 事件委托
        list.onclick = function(e){
            // console.log('ul被点击了');
            if(e.target.nodeName == 'BUTTON'){
                list.removeChild(e.target.parentNode);
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
    <script>
        // 构造函数
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        var obj = new Person('lili',20);
        console.log(obj);
        // Object  Array  String
        // var d = new Date();
        // console.log(d.toLocaleString());
    </script>
</head>
<body>
    <div id="box">2019/9/16 下午3:13:37</div>
    <script>
        var box = document.getElementById('box');    
        var d1 = new Date('2017-9-19');
        d1.setHours(14);
        // setInterval(function(){
            // var d2 = new Date();
            // console.log(d2.getTime());
            // var day = parseInt((d2-d1)/1000/60/60/24);
            // var hours = parseInt((d2-d1)/1000/60/60%24);
            // console.log(day+'-'+hours);
        // },1000)
        // setInterval(function(){
            // var d = new Date();
            // var mon = d.getMonth();
            // var day = d.getDay();
            // var h = d.getHours();
            // var m = d.getMinutes();
            // var s = d.getSeconds();
            // box.innerHTML = mon+'--'+day+'--'+h+'--'+m+'--'+s
            // box.innerHTML = d.toLocaleString();
        // },1000)
    </script>
</body>
</html>

小菜鸟码住

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9-16 h5总结清除定时器，键盘事件，时间表示

Javascript简介基于对象和事件驱动的脚本语言动态、弱类型特点：动态（声明时无需指定变量类型）弱类型（可以给变量赋值成任意类型）Javascript包括：ECMAscript（基本语法）DOM：（文档对象模型）BOM：（浏览器对象模型）事件类型：onclick onmouseover onmouseoutonmousemove onmouseup onmo...
复制链接

扫一扫