bom小案例

最新推荐文章于 2024-09-10 17:12:35 发布

寻_欢

最新推荐文章于 2024-09-10 17:12:35 发布

阅读量110

点赞数

分类专栏： js基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51510783/article/details/128445659

版权

js基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

window

window是js中的顶级对象。
window.onload可在任意地方写js 但传统写法只能写一次，多个以最后一个为准。
window.addEventListener(‘load’,function(){}）可多次引入
load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等

//DONContentLoaded是DOM加载完毕，不包含图片 falsh css等就可以执行加载速度比load更快一些
        document.addEventListener('DOMContentLoaded',function(){
            console.log('比load快')
        })

跳转页面

loacation.href可以进行页面的跳转

location.href='https://www.bilibili.com/'

保存历史的跳转

 location.assign('https://www.bilibili.com/')

不保存历史的跳转

location.replace('https://www.bilibili.com/')

刷新，true强制刷新（所有内容重新加载）

location.reload()

history对象可以进行页面前进，后退

forward前进
back后退
go(1)前进一步，go（-1）后退

history.forward();

计时器

在之后的编程中很多场景会用到计时器。

5秒后跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load',function(){
            var p=document.querySelector('p');
            var time=5;
            down()
            // p.innerHTML='5秒钟跳转到首页';
            var timer=setInterval(down,1000)
            function down(){
                if(time==0){
                    time=5;
                    clearInterval(timer);  
                    location.href="https://www.bilibili.com/"  ;              
                }else{
                     p.innerHTML=time+'秒钟跳转到首页';
                     time--;
                }
            }
        })
    </script>
</head>
<body>
    <p></p>
</body>
</html>

手机发送验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    手机号：<input type="text"><button>发送</button>
    <script>
        var btn=document.querySelector('button');
        var timer=3;
        btn.addEventListener('click',function(){
            var time=setInterval(function(){
                if(timer==0){
                    btn.disabled=false;
                    btn.innerHTML='发送';
                    timer=3
                    clearInterval(time)
                }else{
                    btn.disabled=true;
                    btn.innerHTML='还剩' + timer+'秒'
                    timer--;
                }
            },1000)
        })
    </script>
</body>
</html>

京东倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>
<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="seconds">3</span>
    </div>
    <script>
        var hour=document.querySelector('.hour');//时
        var minute=document.querySelector('.minute');//分
        var seconds=document.querySelector('.seconds')//秒
        var userTime=+new Date('2022-12-22 18:00:00')
        countDown()
        // console.log(userTime);
        var killDown=setInterval(countDown,1000)
        function countDown() {
            var nowTime=+new Date();
            times=(userTime-nowTime)/1000;
            var h=parseInt(times/60/60);
            h =h<10 ? '0'+h:h;
            hour.innerHTML=h
            var m=parseInt(times/60%60)
            m=m<10 ?  '0'+m : m;
            minute.innerHTML=m;
            var s=parseInt(times%60);
            s=s<10 ? '0'+s:s;
            seconds.innerHTML=s;

        }
    </script>
</body>
</html>