JavaScript BOM 案例

最新推荐文章于 2022-06-21 20:34:06 发布

栀虞子

最新推荐文章于 2022-06-21 20:34:06 发布

阅读量937

点赞数

分类专栏： JavaScript学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_52476758/article/details/121960516

版权

JavaScript学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

BOM 案例

1. 5秒后自动关闭广告

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var  ad=document.querySelector('.ad');
        setTimeout(function(){
            ad.style.display='none';
        },5000);
    </script>
</body>

2. 倒计时效果

   <style>
        /* 倒计时 */
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
<body>
    <!-- 倒计时 -->
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素
        var hour=document.querySelector('.hour');
        var minute=document.querySelector('.minute');
        var second=document.querySelector('.second');
        var inputTime=+new Date('2021-12-15 20:00:00'); // 返回的是用户输入时间的毫秒数
        // 先调用一次这个函数，防止第一次刷新空白
        countDown();
        // 2. 开启定时器
        setInterval(countDown,1000);
        // 3. 倒计时函数
        function countDown(){
            var nowTime=+new Date();    // 返回当前时间总的毫秒数 
            var times=(inputTime-nowTime)/1000;    // times是剩余时间总的秒数
            var h=parseInt(times/60/60%24);     // 时
            h=h<10?'0'+h:h;
            hour.innerHTML=h; // 把剩余的小时给hour黑色盒子
            var m=parseInt(times/60%60);        // 分
            m=m<10?'0'+m:m;
            minute.innerHTML=m; // 把剩余的分钟给minute黑色盒子
            var s=parseInt(times%60);           // 秒
            s=s<10?'0'+s:s;
            second.innerHTML=s; // 把剩余的秒数给second黑色盒子
        }
    </script>
</body>

3. 发送短信案例

<body>
    <!-- 发送短信案例 -->
    手机号码：<input type="number"><button>发送</button>
    <script>
        var btn=document.querySelector('button');
        var time=60;    // 剩下的秒数
        btn.addEventListener('click',function(){
            this.disabled=true; // this指向btn
            var time1=setInterval(function(){
                if(time==0){
                    // 清除定时器和复原按钮
                    clearInterval(time1);
                    btn.disabled=false;
                    btn.innerHTML='发送';
                    time=60;    // 这个time需要重新开始
                }else{
                    btn.innerHTML='还剩下'+time+'秒';
                    time--;
                }
            },1000);
        })
    </script>
</body>

4. 5秒中之后跳转页面

<body>
    <!-- 5秒中之后跳转页面 -->
    <button>点击</button>
    <div></div>
    <script>
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        var time=5;
        // 点击跳转
        btn.addEventListener('click',function(){
            // console.log(location.href);
            location.href='http://www.baidu.com';
        })
        // 定时跳转
        setInterval(function(){
            if(time==0){
                location.href='http://www.baidu.com';
            }else{
                div.innerHTML='您将在'+time+'秒钟之后跳转首页';
                time--;
            }
        },1000);
    </script>
</body>

5. 获取URL参数数据

// login.html
<body>
    <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>
// index.html
<body>
    <div></div>
    <script>
        console.log(location.search);   // ?uname=andy
        // 1. 先去掉？ substr('起始的位置',截取字符串个数);
        var params=location.search.substr(1);
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr=params.split('=');
        console.log(arr);
        var div=document.querySelector('div');
        // 3. 把数据写入div
        div.innerHTML=arr[1]+'欢迎您';
    </script>
</body>

栀虞子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript BOM 案例

BOM 案例1. 5秒后自动关闭广告<body> <img src="images/ad.jpg" alt="" class="ad"> <script> var ad=document.querySelector('.ad'); setTimeout(function(){ ad.style.display='none'; },5000); </script&gt
复制链接

扫一扫