【无标题】

最新推荐文章于 2024-07-17 18:42:40 发布

宋宋丫

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量72

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_73145804/article/details/127605745

版权

六、标签的属性

1、innerHTML属性

：代表标签的html内容（代表起始标签和结束标签之间的内容）

练习

需求点击写入按钮 div里面出现文本内容动态

<style>
    .info{
        width: 300px;
        height: 280px;
        background-color: red;
        color: white;
    }
</style>
<body>
    <div class="info"></div>
    <br><br>
    <button class="btn_write">写入</button>
    <!-- 需求点击写入按钮 div里面出现文本内容  动态 -->
    <script>
        //1.获取标签
        let mydiv = document.querySelector('.info')
        let btn = document.querySelector('.btn_write')
        //2.给按钮注册事件
        btn.addEventListener('click',function(){
            //将字符串写入div中
            mydiv.innerHTML='<h2>床前明月光</h2> '
        })
    </script>
</body>

练习：倒计时：

<style>
    #app{
        width: 500px;
        height: 200px;
        color: red;
        font-size: 20px;
        margin: 0 auto;
    }
</style>
<body>
    <div id="app"></div>
    <script>
        //定义定时器函数
        function showTime() {
            let start = new Date()//当前日期
            let end = new Date('2023-1-1')

            let times = end -start
            let d =parseInt(times/1000/60/60/24)
               d = d<10? '0'+d:d
            let h =parseInt(times/1000/60/60%24)
               h = h<10? '0'+h:h
            let m = parseInt(times/1000/60%60)
              m = m<10? '0'+m:m
            let s = parseInt(times/1000%60)
              s = s<10? '0'+s:s

            let str = `距离2023年元旦还有:${d}天${h}小时${m}分钟${s}秒`
            //获取标签
            let mydiv = document.querySelector('#app')
            mydiv.innerHTML=str
        }
        //setInterval(fn,times):每间隔times毫秒后执行fn函数   
        setInterval(showTime,1000)//每隔一秒调用一次
    </script>
</body>

2. input的标签value属性

:代表标签的值，是 input的内置属性

<body>
    <button id="my_btn">点击</button>
    <input type="text" id="score" value="122322">
    <script>
        //获取标签
        let score  = document.querySelector('#score')
        let btn = document.querySelector('#my_btn')
        my_btn.addEventListener('click', function () {
            alert(score.value)
        });
    </script>
</body>

练习2：按钮与input的结合

<body>
    <button id="btn_start">开始计数</button>
    <input type="text" id="inp" value="0">
    <button id="btn_stop">停止计数</button>
    <script>
//方法一
        // //1.获取控件:
        // let start = document.querySelector('#btn_start')
        // let inpu = document.querySelector('#inp')
        // let stop = document.querySelector('#btn_stop')
        // //2.给注册控件事件监听
        // var timer = null;
        // start.addEventListener('click', name);
        // function name() {
        //     //创建定时器
        //     timer = setInterval(function () {
        //             inpu.value++
        //     }, 1000)
        // }
        // inp.addEventListener('click', name)
        // //3.单击停止按钮，清除定时器
        // stop.addEventListener('click', function () {
        //     clearInterval(timer)
        // })

//方法二
        //1.获取控件:
        let start = document.getElementById('btn_start')
        let inpu = document.getElementById('inp')
        let stop = document.getElementById('btn_stop')
        //2.定义变量
        let timer = null;t=0
        //3.给按钮注册事件监听
        start.addEventListener('click',function(){
            timer=setInterval(function(){
                t++;
                inpu.value=t
            },500)
        })
        //4.单击停止按钮，清除定时器
        stop.addEventListener('click', function () {
            clearInterval(timer)
        })
    </script>
</body>