一个简易随机点名器

最新推荐文章于 2024-08-31 22:33:30 发布

seabirdChen

最新推荐文章于 2024-08-31 22:33:30 发布

阅读量1.8k

点赞数 1

文章标签：简易点名器

本文链接：https://blog.csdn.net/seabridFiy/article/details/88950384

版权

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel='stylesheet' href="../css/dian.css">
</head>

<body>
    <div class="wrapper">
        <h1>辣鸡点名器</h1>
        <div class="ranText">开始随机点名</div>
        <div class="ranBtn">点名</div>
    </div>


</body>
<script>
    var name =
        "旋涡鸣人 宇智波佐助 春野樱 卡卡西 夕日红 犬冢牙和赤丸 油女志乃 日向雏田 奈良鹿丸\
         山中井野 秋道丁次 阿斯玛 李洛克 日向宁次 天天 凯 木叶丸 伊鲁卡 神月出云 自来也\
          日向日差 焰大叔 静音 蛤蟆吉 宇智波鼬 子铁 佐井 纲手 三代火影 波风水门 乌龟 萌黄 乌冬\
           夷老师 水木老师 森乃伊比喜 御手洗红豆 月光疾风 蛤蟆文太 志治美夫人 日向日足 日向花火\
            不知火玄马 小春 六道一乐 绳树 断 豚豚 帕克 蛤蟆龙 活蝓 奈良鹿久 秋道长治 山中井野市 \
            油女志尾 奈良吉乃 出云 雷同 伊瓦西 猿魔 犬冢爪 犬冢鼻 宇智波未琴 卯月夕颜 旗木朔茂";
    var nameArr = name.split(" ");
    document.querySelector('.ranBtn').addEventListener('click', ranName);
    var times = 0;

    function ranName() {
        var ranText = document.querySelector('.ranText');
        ranText.style.letterSpacing = "0.2em";
        window.clearInterval(times);
        var oldDate = Date.now();

        times = setInterval(function () {
            let nowDate = Date.now();

            console.log(nowDate, oldDate + 400);

            if (nowDate >= oldDate + 2000) {

                window.clearInterval(times);
            }
            let ran = parseInt(Math.random() * nameArr.length);
            ranText.innerHTML = "<font color='green'>" + nameArr[ran] + "</font>";
        }, 40);

    }
</script>


</html>

CSS部分

@charset "UTF-8";
* {
  margin: 0;
  padding: 0; }

.wrapper h1, .ranText, .ranBtn {
  text-align: center; }

.wrapper, .ranText {
  border: 1px solid black; }

body {
  font-family: 'Microsoft YaHei'; }

/**主题框样式*/
.wrapper {
  width: 600px;
  height: 200px;
  margin: 100px auto;
  padding: 50px 0;
  /**标题样式*/ }
  .wrapper h1 {
    font-size: 35px; }

.ranText {
  margin: 30px auto;
  width: 520px;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  color: gray; }

.ranBtn {
  width: 150px;
  height: 50px;
  margin: 0 auto;
  background: darkorange;
  font-size: 28px;
  line-height: 50px;
  letter-spacing: 0.3em;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  color: white;
  cursor: pointer; }