JS 第五讲 BOM编程

最新推荐文章于 2024-07-17 20:19:26 发布

早饭不吃辣

最新推荐文章于 2024-07-17 20:19:26 发布

阅读量52

点赞数

文章标签： javascript java 前端

本文链接：https://blog.csdn.net/weixin_45514133/article/details/125379856

版权

第一节认识BOM

BOM：Browser Object Model(浏览器对象模型)，将整个浏览器看作是一个对象浏览器上的每一个部分都是这个对象的一个子对象，其中window是顶层对象，属性(静态对象)和行为(动态方法)

第二节 window对象

方法名	说明
alert()	警示框
prompt()	输入框
confir()	确认框；点击确认时返回true；取消时返回false
open()	打开一个新窗口
close()	关闭一个窗口
setInterval()	每隔指定毫秒数执行一次指定代码
clearInterval()	清楚setInterval()
setTimeout()	延迟指定毫秒数执行一次指定代码
clearTimeout()	清楚setTimeout

案例1获取屏幕时间

// function getSysTime(){
            //  //获取时间
            //  var date=new Date();
            //  document.getElementById("box").innerHTML=date.toLocaleString()
            //  //延迟指定时间后执行一次，只执行一次
            //  setTimeout("getSysTime()",1000)
            // }
            // // window.οnlοad=getSysTime;
            // //每隔指定时间就会执行一下
            // setInterval("getSysTime()",1000)

案例二倒计时

<script>
    var seconds=60
    var timer;
    function djs(){
        var obj=document.getElementById("btn")
        obj.disabled=true
        seconds--;
        obj.innerHTML="重新发送"+seconds+"s"
        timer=setTimeout("djs()",1000)
        if(seconds<=0){
            clearTimeOut(timer)
            obj.enabled=true
            obj.innerHTML="发送验证码"
            seconds=60
        }
    }
</script>
<body>
    <button id="btn" οnclick="djs()">
        发送验证码
    </button>
</body>

案例三点名系统

<script>
    var arr=["张三","张四","张五","张六","张七","张八"]
    var timer;
    function start(){
        var num=pareeInt(Math.random()*7-1)
        document.getElementById("box").innerHTML=arr[num]
        timer=setTimeout("start()",100)
    }
    function end(){
        clearTimeout(timer)
    }
</script>
<style>
    div{
                width: 300px;
                height: 50px;
                font-size: 20;
                border: 1px solid black;
            }

</style>
<body>
    
    <div id="box"></div>
        <button οnclick="start()">开始</button>
        <button οnclick="end()">结束</button>
    
</body>

第三节 location

<script>
    function tz(){
        if(val=="bd"){
            window.location.href="https://www.baidu.com"
        }if(val=="tb"){
            window.location.href="https://www.taobao.com"
        }
    } 
</script>
<body>
    <button οnclick="tz('bd')">百度</button>
    <button οnclick="tz('tb')">淘宝</button>
    <button οnclick="hisstory.back() ">后退</button>
</body>