随机点餐、钟表、复选框的选择

最新推荐文章于 2024-08-30 15:33:13 发布

m-TT

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量125

点赞数 1

分类专栏： js 文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127590788

版权

js 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

随机点餐

<style>
    .outer{
        margin: auto;
        width: 500px;
        height: 300px;
        background-color: rgb(230, 183, 191);
        text-align: center;
        overflow: hidden;
    }
    #foods{
        margin: 50px auto 30px;
        display:block;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: rgb(192, 245, 227);
        text-align: center;
        line-height: 150px;
    }
    button{
        width: 80px;
        height: 40px;
        background-color: lightgray;
        border: none;
    }
    button:active{
        color: red;
        font-size: 20px;
    }
</style>
<body>
    <div class="outer">
        <span id="foods">火锅</span>
        <div class="inner">
            <button id="begin">开始</button>
            <button id="end">停止</button>
        </div>
    </div>
    <script>
        let begin = document.getElementById('begin')
        let end = document.getElementById('end')
        let food = document.getElementById('foods')
        var arr = ['火锅','新疆炒米粉','香蕉牛奶','珍珠奶茶','泡芙','华夫饼','炒米粉','燕麦牛奶','桂花酿','桂花引','百香果','草莓摇摇奶昔','菜夹馍','擀面皮','米皮','凉皮','串串','卤菜','刀削面','麻辣烫','过桥米线','黄焖鸡','快餐','炒拉条','冒菜','冰淇淋']
        var timer = null
        begin.addEventListener('click',function() {
            window.clearInterval(timer)
            timer = window.setInterval(getFoods,100)
        })
        function getFoods() {
            var random = Math.trunc(Math.random()*arr.length)
            food.innerHTML = arr[random]
        }
        end.addEventListener('click',function(){
            clearInterval(timer)
        })
        
    </script>
</body>

钟表

方法一：

<style>
    #time {
        width: 400px;
        height: 200px;
        border: 3px double #ccc;
        margin: 50px auto;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
    }
    .btn {
        display: block;
        width: 200px;
        height: 50px;
        text-align: center;
        margin: auto;
        border-radius: 5px;
        font-size: 30px;
        background-color: rgb(223, 221, 221);
    }
</style>
<body>
    <div id="time"></div>
    <button class="btn">开始</button>
    <script>
        // 1.定义计时器
        var timer = null
        var flag = true//控制按钮
        // 2.定义函数--显示时间
        function getTimes() {
            let current = new Date()
            let hours = current.getHours()
            hours = hours < 10 ? '0'+ hours : hours
            let minutes = current.getMinutes()
            minutes = minutes < 10 ? '0'+ minutes : minutes
            let seconds = current.getSeconds()
            seconds = seconds < 10 ? '0'+ seconds : seconds
            let str = `${hours}:${minutes}:${seconds}`
            document.getElementById('time').innerHTML = str
        }
        getTimes()//调用函数
        // 3.给按钮注册时间监听
        let start = document.querySelector('.btn')
        start.addEventListener('click',function() {
            if (flag) {
                timer = setInterval(getTimes,1000)
                flag = !flag
                this.innerHTML='暂停'
            }else{
                clearInterval(timer)
                flag = !flag
                this.innerHTML='开始'
            } 
        })
    </script>
</body>

方法二：

<style>
    .time{
        width: 400px;
        height: 200px;
        border: 3px double #ccc;
        margin: 50px auto;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
    }
    .btn{
        display: block;
        width: 200px;
        height: 50px;
        text-align: center;
        margin: auto;
        border-radius: 5px;
        font-size: 30px;
        background-color: rgb(223, 221, 221);
    }
</style>
<body>
    <!-- 开始和结束是同一个 -->
    <div class="time"></div>
    <button class="btn" onclick="choose()">暂停/开始</button>
    <script>
        // 1、编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动。
        // 定义计时器
        var timer = null
        // 获取时间
        function getTime() {
            let current = new Date()
            let hours = current.getHours()
            hours = hours < 10 ? '0' + hours : hours
            let minutes = current.getMinutes()
            minutes = minutes < 10 ? '0' + minutes : minutes
            let seconds = current.getSeconds()
            seconds = seconds < 10 ? '0' + seconds : seconds
            let str = `${hours}:${minutes}:${seconds}`
            document.querySelector('.time').innerHTML=str
            // 计时器每隔1秒执行一次
            timer = setTimeout(getTime,1000)
        }
        // 调用函数
        getTime()
        // 控制按钮
        let action = true
        function choose() {
            if (action == true) {  //暂停
                action = !action
                document.getElementsByClassName('btn')
                // 清除计时器
                clearInterval(timer)
            }else{                  //开始
                action = !action
                document.getElementsByClassName('btn')
                getTime()
            }
        }
    </script>
</body>

复选框的选择

方法一：

<body>
    <!-- 2、复选框的全选： -->
    <form action="#">
        <p>请选择你的爱好：</p>
        <p><input type="checkbox" name="" id="allselect">全选/全不选</p>
        <p>
            <input type="checkbox" class="play">打篮球
            <input type="checkbox" class="play">踢足球
            <input type="checkbox" class="play">上网
            <input type="checkbox" class="play">写代码
            <input type="checkbox" class="play">写文档
            <input type="checkbox" class="play">查BUG
        </p>
        <p>
            <button id="selectall">全选</button>
            <button id="notselectall">全不选</button>
            <button id="reverselect">反选</button>
        </p>
    </form>
    <script>
        let playing = document.querySelectorAll('.play')
        // 全选/全不选
        let all = document.getElementById('allselect')
        let flag = true
        function getAll() {
            if (flag) {
                for (let i = 0; i< playing.length;i++) {
                    playing[i].checked = true
                }
                flag =false
            } else{
                for (let i = 0; i < playing.length; i++) {
                    playing[i].checked = false
                }
                flag=true
            }
        }
        // 添加事件监听
        all.addEventListener('click',getAll)
        // 全选
        let selectAll = document.getElementById('selectall')
        function getSelectAll() {
            for (let i = 0; i < playing.length; i++) {
                playing[i].checked = true
            }
        }
        // 添加事件监听
        selectAll.addEventListener('click', getSelectAll)
        // 全不选
        let notSelectAll = document.getElementById('notselectall')
        function getNotSelectAll() {
            for (let i = 0; i < playing.length; i++) {
                playing[i].checked = false
            }
        }
        // 添加事件监听
        notSelectAll.addEventListener('click', getNotSelectAll)
        // 反选
        let reverSelect = document.getElementById('reverselect')
        function getReverseSelect(){
            for (let i = 0; i < playing.length; i++) {
                if (playing[i].checked==false) {
                    playing[i].checked=true
                }else{
                    playing[i].checked=false
                }
            }
        }
        // 添加事件监听
        reverSelect.addEventListener('click', getReverseSelect)
    </script>
</body>

方法二：

<body>
    <!-- 2、复选框的全选： -->
    <form action="#">
        <p>请选择你的爱好：</p>
        <p><input type="checkbox" name="" id="allornot">全选/全不选</p>
        <p>
            <label><input type="checkbox" name="hobby"/>打篮球</label>
            <label><input type="checkbox" name="hobby"/>踢足球</label>
            <label><input type="checkbox" name="hobby"/>上网</label>
            <label><input type="checkbox" name="hobby"/>写代码</label>
            <label><input type="checkbox" name="hobby"/>写文档</label>
            <label><input type="checkbox" name="hobby"/>查BUG</label> 
        </p>
        <p>
            <button id="selectall">全选</button>
            <button id="notselectall">全不选</button>
            <button id="reverselect">反选</button>
        </p>
    </form>
    <script>
        let allornot = document.getElementById('allornot')
        let selectall = document.getElementById('selectall')
        let notselectall = document.getElementById('notselectall')
        let reverselect = document.getElementById('reverselect')
        // 全选
        function selectAll() {
            let interest = document.getElementsByName('hobby')
            for (let i = 0; i < interest.length; i++) {
                interest[i].checked = true
            }
        }
        selectall.addEventListener('click',selectAll)
        // 全不选
        function notSelectAll() {
            let interest = document.getElementsByName('hobby')
            for (let i = 0; i < interest.length; i++) {
                interest[i].checked = false
            }
        }
        notselectall.addEventListener('click',notSelectAll)
        // 反选
        reverselect.addEventListener('click',function(){
            let interest = document.getElementsByName('hobby')
            for (let i = 0; i < interest.length; i++) {
                interest[i].checked = !interest[i].checked
            }
        })
        // 全选/全不选
        // 复选框：推荐使用change
        allornot.addEventListener('change',function(){
            let interest = document.getElementsByName('hobby')
            if (this.checked) {
                selectAll()
            }else{
                notSelectAll()
            }
        })
    </script>
</body>