JS页面操作

最新推荐文章于 2024-07-12 16:27:40 发布

鹿路露璐

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量122

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/csdnid_0001/article/details/127521769

版权

一、设置与清除定时器（setTimeout，clearTimeout，setInterval，clearInterval）


<!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 onload="">
    <button id="btn">开始</button>
    <button id="clean">清除定时器</button>

    <script>
        var timer = null;
        function fun() {
            alert('我要退休');
        }
        let start = document.querySelector('#btn');//选择id是btn的标签（控件）
        start.addEventListener('click', show);//给标签注册click事件，当click事件被触发时，执行show函数
        function show(){
            timer = setTimeout(fun, 3000)//设置定时器
        }

        let clean = document.querySelector('#clean');
        clean.addEventListener('click',end)
        function end(){
            clearTimeout(timer);//清除定时器
        }
    </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>
</head>

<body>
    <button id="btn_start">开始</button>
    <button id="btn_stop">停止</button>
    <script>
        // setInterval(function(){
        //     console.log('AAA');
        // },2000);

        //1.获取按钮
        let start = document.getElementById('btn_start');

        //2.给按钮注册事件监听
        var timer = null;

        //方式1
        // start.addEventListener('click',function(){
        //     //创建定时器
        //     timer = setInterval(function(){
        //         console.log('我要退休！');
        //     },2000)
        // })

        //方式2
        start.addEventListener('click', show);
        function show() {
            //创建定时器
            timer = setInterval(myprint, 2000)
        }
        function myprint() {
            console.log('我要退休！');
        }

        //获取停止按钮
        let mystop = document.querySelector('#btn_stop');
        mystop.addEventListener('click',clean);
        function clean(){
            clearInterval(timer);//清除定时器
        }

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

二、innerHTML的使用

<!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>
        .info{
            width: 300px;
            height: 200px;
            background-color: pink;
            color: aqua;
            margin-bottom: 50px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <!-- 点击按钮，把文字内容写入到div中显示 -->
    <div class="info"></div>
    <button class="btn">写入按钮</button>
    <script>
        let mydiv = document.querySelector('.info');
        let btn = document.querySelector('.btn')

        btn.addEventListener('click',function(){
            mydiv.innerHTML = '<h1>哈哈哈哈哈哈</h1>';
        })
    </script>
</body>
</html>

三、input的value属性

<!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>
        input{
            width: 500px;
            height: 40px;
            margin-left: 300px;
            margin-top: 100px;
            background-color: aquamarine;
            border: none;
            outline: none;
            font-size: 40px;
        }
        button{
            height: 40px;
            border: none;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="txt">
        <button id="btn">点击按钮获取输入框内容</button>
    </div>
    
    <script>
        let txt = document.querySelector('#txt');
        let btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            alert(`输入的内容为：${txt.value}`);
        })
    </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>
        #jishi{
            width: 900px;
            height: 200px;
            margin: auto;
            background-color: aqua;
            color: fuchsia;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div id="jishi"></div>
    <script>
        function showinfo() {
            //1.创建日期对象
            let end = new Date('2023-1-1')
            let start = new Date()

            //2.计算得到两个日期对象之间的毫秒数之差,转换成秒钟
            let times = (end - start) / 1000

            //3.计算得到天、时、分、秒
            let d = parseInt(times / 60 / 60 / 24)  //转换成天数
            d = d < 10 ? ('0' + d) : d //如果天数是个位数，则在前面补0

            let h = parseInt(times / 60 / 60 % 24)
            h = h < 10 ? ('0' + h) : h

            let m = parseInt(times / 60 % 60)
            m = m < 10 ? ('0' + m) : m

            let s = parseInt(times % 60)
            s = s < 10 ? ('0' + s) : s

            let info = `距离2023年元旦还有 ${d} 天 ${h} 时 ${m} 分 ${s} 秒`

            let mydiv = document.querySelector('#jishi')
            mydiv.innerHTML = info;//把info字符串写入div中
        }

        setInterval(showinfo,1000)

    </script>
</body>

</html>