使用JavaScript控制按钮点击触发的时间段

最新推荐文章于 2023-12-09 14:25:27 发布

H之一

最新推荐文章于 2023-12-09 14:25:27 发布

阅读量875

点赞数

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

本文链接：https://blog.csdn.net/h_zhiyi/article/details/109779377

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

话不多说
直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./addevent.js"></script>
    <title>Document</title>
    <style>
        *{
            list-style: none;
            text-decoration: none;
            margin: 0;
            padding: 0;
            
        }
        #keydownone{
            width: 650px;
            height: 350px;
            position: relative;
            /* border: 1px solid red; */
            margin: 100px 500px;
            overflow: hidden;
        }
        #keydownone>h1{
            text-align: center;
            line-height: 300px;
            /* display: inline-block; */
        }
        img{
            position: absolute;
            display: none;
            top: 0px;
            /* z-index: 999; */
            
        }
        #pic1{
            /* display: block; */
        }
        #aniu{
            position: absolute;
            margin: 20px 700px;
            width: 100px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="keydownone">
        <h1 id="hh">时时刻刻保持好心情！</h1>
    <img src="./zaos.jpg" alt="" id="pic1">
    <img src="./zhongw.gif" alt="" id="pic2">
    <img src="./wans.gif" alt="" id="pic3">
</div>
<input type="button" value="点我！" id="aniu">
</body>
</html>
<script>
    var h = document.getElementById("hh");
    var zao = document.getElementById('pic1');
    var zhong = document.getElementById('pic2');
    var wan = document.getElementById('pic3');
    var clickone = document.getElementById('aniu');
    //得到当前时间
    var date = new Date();
    //得到当前时间的小时
    var hour = date.getHours();
    // console.log(date);
    // console.log(hour);
    //给按钮添加点击事件实现图片变化
    addEvent(clickone,"click",function(){
        if(hour<12){
            zao.style.display = "block";
            h.style.display = "none";
        }else if(hour<18){
            zhong.style.display = "block";
            h.style.display = "none";
        }else if(hour<24){
            wan.style.display = "block";
            h.style.display = "none";
        }
    },false)
</script>