20180228 BOM 设置删除定时器 DOM操作练习

BOM：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bom</title>
<script type="text/javascript">
    function testalert(){
        window.alert("这是alert()方法");
        
    }
    function testconfirm(){
        var a=window.confirm("是否退出");
        if(a==true){
            alert("拜拜");
        }else{
            alert(":-");
    移动窗口的偏移量    }
    }
    function testprompt(){
        var b=window.prompt("请输入你的姓名：");
        if (b!=null){
            alert(b);
        }else{
            alert("你点了取消按钮");
        }
    }
    function testmoveBy(){
        window.moveBy(50,50);//移动窗口的偏移量
    }
        function testmoveTo(){
        window.moveTo(150,150);//
    }
    function testresizeBy(){
        window.resizeBy(50,50);//重设窗口大小的偏移
    }
    function testresizeTo(){
        window.resizeTo(150,150);//重设浏览器串口大小位置
    }
    function testopen(){window.open("https://www.baidu.com/","baidu","left=20,top=50,width=300,height=500,location=no,toolbar=no,status=no,resizable=no");}
         
                    
    function watch(){
            var d=new Date();//创建一个获取系统时间的Date对象
            var h=d.getHours();//获取系统时间的小时
            var m=d.getMinutes();//获取系统时间的分钟
            var s=d.getSeconds();//获取系统时间的秒
            document.getElementById("time").innerHTML=h+":"+                                                                                                                    m+":"+s;
        }
    //设置定时器
    var timer=setInterval("watch()",1000);//每隔1秒去调用一下这个方法
        
    </script>
</head>

<body>
<input type="button" value="alert"
onClick="testalert()">
<input type="button" value="confirm" 
onClick="testconfirm()">
<input type="button" value="prompt"
onClick="testprompt()">
<input type="button" value="moveBy"
onClick="testmoveBy()">
<input type="button" value="moveTo"
onClick="testmoveTo()">
<input type="button" value="resizeBy"
onClick="testresizeBy()">
<input type="button" value="resizeTo"
onClick="testresizeTo()">
<input type="button" value="open" 
onClick="testopen">
<div id="time"></div>
</body>
</html>

设置删除定时器：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置 删除定时器</title>
<style type="text/css">
    #time{
        width: 200px;
        height: 50px;
        background-color: yellow;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
    }
    </style>
<script type="text/javascript">
    var count=0;
    function showTime(){
    var d=new Date();//获取系统时间
    var hour=d.getHours();//获取小时
    var minute=d.getMinutes();//获取分钟
    var second=d.getSeconds();//获取秒
    if(hour<10){
        hour="0"+hour;
    }
    if(minute<10){
        minute="0"+minute;
    }
    if(second<10){
        second="0"+second;
    }
    count++;
    if(count==10){
        window.clearInterval(timer);
    }
    document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
        
    }
    var timer=window.setInterval("showTime()",1000);

    
    </script>
</head>

<body>
<div id="time"></div>
</body>
</html>

DOM练习1：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作练习</title>
<script type="text/javascript">
    function show(){
        var content1=document.getElementById("d").innerHTML;
        var content2=document.getElementById("t").value;
        var content3=document.getElementById("i").value;
        alert(content1+"
"+content2+"
"+content3);
    }
    </script>
</head>

<body>
<div id="d">我的div块</div>
<textarea name="" id="t" cols="30" rows="10">好好学习，天天向上</textarea><input type="text" value="按我呀" id="i"><br>
<input type="button" value=" 访问三个元素的内容" onClick="show()">
</body>
</html>

DOM练习2：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作2-通过节点关系获取元素</title>
<style>
    #n4{
        color: red;
    }
    </style>
    <script type="text/javascript">
        function fu(){
            var f=document.getElementById("n4").parentNode.innerHTML;
            alert(f);
        }
        function first(){
            var first=document.getElementById("n4").parentNode.firstChild.nextSibling.innerHTML;
            alert(first);
        }
        function forward(){
            var f=document.getElementById("n4").previousSibling.previousSibling.innerHTML;
            alert(f);
        }
        function next(){
            var n=document.getElementById("n4").nextSibling.nextSibling.innerHTML;
            alert(n);
        }
        function last(){
            var l=document.getElementById("n4").parentNode.lastChild.previousSibling.innerHTML;
            alert(l);
        }
        function num(){
            var num=document.getElementsByTagName("li").length;
            alert(num);
        }
    </script>
</head>

<body>
<ul type="square" id="m">
    <li id="n1">张三</li>
    <li id="n2">李四</li>
    <li id="n3">王五</li>
    <li id="n4">赵六</li>
    <li id="n5">小红</li>
    <li id="n6">小明</li>
</ul>
<input type="button" value="父节点" onClick="fu()">
<input type="button" value="第一个子节点" onClick="first()">
<input type="button" value="上一个子节点" onClick="forward()">
<input type="button" value="下一个子节点" onClick="next()">
<input type="button" value="最后一个子节点" onClick="last()">
<input type="button" value="得到所有li元素的个数" onClick="num()">
</body>
</html>

20180228 BOM 设置 删除定时器 DOM操作练习

20180228 BOM 设置删除定时器 DOM操作练习