（拯救选择困难症）随机选择今天中午吃啥

准时准点睡觉

已于 2022-08-17 00:49:16 修改

阅读量5.3k

点赞数

分类专栏： html新手文章标签： javascript 前端 html

于 2022-07-20 14:59:30 首次发布

本文链接：https://blog.csdn.net/zouxun660/article/details/125892436

版权

html新手专栏收录该内容

6 篇文章 0 订阅

订阅专栏

不知道今天中午改吃啥

HTML（拯救选择困难症）

效果图：

源代码：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随机点餐</title>
</head>
<style>
	#box{background-color:#CCC;width:400px;font:600 24px/3 "";text-align:center;margin:20px auto		;border-radius:12px;}
	#btn{background-color:#CFF;width:100px;font:14px/2 "";text-align:center;margin:10px 46%		;border-radius:25px;}
</style>
<body>
    <div id="box">今天中午想点啥</div>
    <input type="button" id="btn" value="开始">
</body>
<script>
 
    var arr = ["椰子鸡","牛肉饭","汤饭","大碗饭", "饺子","糖醋排骨","红烧肉"];
 
    var box = document.getElementById("box")
    var btn = document.getElementById("btn")
 
    var i=0;
    var t;
 
    btn.onclick = function(){
        if(i==0){
            t = setInterval(function(){
                box.innerHTML = arr[random(0,arr.length-1)];
            }, 30);
 
            i = 1;
            btn.value = "停止"
        }else{
            clearInterval(t);
            i = 0;
            btn.value = "继续";
        }
    }
 
 
    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
 
</script>
</html>