使用js的一些简单的小demo

最新推荐文章于 2025-04-29 10:23:31 发布

Weller423

最新推荐文章于 2025-04-29 10:23:31 发布

阅读量335

点赞数

文章标签： javascript html5 css

本文链接：https://blog.youkuaiyun.com/m0_61386972/article/details/129539360

版权

使用arguments完成函数getResult，实现得到输入的所有的数值中的最小值、最大值、平均数、总和等功能

        function getResult(){
            var sum=0,max=arguments[0],min=arguments[0],averages;
            for(var i=0;i<arguments.length;i++){
                sum+=arguments[i];
                if(max<arguments[i]){
                    max=arguments[i];
                }
                if(min>arguments[i]){
                    min=arguments[i];
                }
            }
            averages=sum/arguments.length;
            var obj={
                summ:sum,
                maxx:max,
                minn:min,
                averagess:averages
            }
            return obj;
        }
        var obj1=getResult(66,44,24,45,56);
        console.log(obj1);

十六进制输出颜色

        var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']
        var str = '#';
        for (var i = 0; i < 6; i++) {
            var res = parseInt(Math.random() * (14 + 1), 10);
            res = Math.floor(Math.random() * (14 + 1));
            str += a[res];
        }
        console.log(str);

本地倒计时,距离毕业还有多久

<body>
    <span id="con"></span>
    <script>
        function fn() {
            // 1.设置毕业时间
            var endDate = new Date('2023-6-20 14:00:00');
            // 2.获取当前时间
            var date = new Date();
            // 3.得到毕业时间与当前时间的差值
            var diffMs = Math.abs(endDate - date);
            // console.log(diffMs);
            // 4.获取现在到毕业的天数，小时，秒
            var day = parseInt(diffMs / 1000 / 60 / 60 / 24);
            var hours = parseInt(diffMs / 1000 / 60 / 60 % 24);
            var min = parseInt(diffMs / 1000 / 60 % 60);
            var sec = parseInt(diffMs / 1000 % 60);
            var str = `还有${day}天${hours}小时${min}分钟${sec}秒就毕业了`;
            // console.log(str);
            document.querySelector('#con').innerHTML = str;
            if (day == 0 && hours == 0 && min == 0 && sec == 0) {
                clearInterval(times);
            }
        }
        fn();
        var times = setInterval(fn, 1000);

    </script>
</body>

随机点名

<head>
    <style type="text/css">
        #isyou {
            font-size: 80px;
            text-align: center;
            margin: 100px auto;
        }

        #btn {
            width: 180px;
            height: 60px;
            border: none;
            background: dodgerblue;
            display: block;
            margin: 0 auto;
            color: #fff;
            font-size: 30px;
            border-radius: 6px;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
        }

        #btn:active {
            background: slateblue;
        }
    </style>
</head>

<body>
    <div id="isyou">请点击下面的按钮，开始点名</div>
    <span id="btn">点击开始</span>
<script type="text/javascript">
    var str = '田志伟,田雨,侯舒涵,王亚鹏,朱影影,冯鑫,乔亦洵,许文龙,王鹏,刘子欣,刘凯,吴付军,房美美,陈喜月,王世琛,梁雨,郑鹏飞';
    // 1.把字符串转化为数组
    var arr = str.split(",");
    console.log(arr);
    // 2.获取对象
    var isyou = document.querySelector("#isyou");
    var btn = document.querySelector("#btn");
    // 默认状态为true，表示开始
    var status1 = true;
    var times = '';
    // 3.设置点击事件
    btn.onclick = function () {
        // 4.判断状态
        if (status1) {
            // 5.开启随机
            times = setInterval(function () {
                // 随机索引,得到名称
                var index = random(0, arr.length - 1);
                var name = arr[index];
                // 把名称输出到页面
                isyou.innerHTML = name;
            }, 30)
            // 修改按钮状态
            btn.innerHTML = "点击停止";
            status1 = false;
        } else {
            btn.innerHTML = "点击开始";
            clearInterval(times);
            status1 = true;
        }
    }
    function random(min, max) {
        return Math.round(Math.random() * (max - min) + min)
    }
</script>
</body>

验证码短信发送后的倒计时

<body>
    手机号:
  <input type="text" id="phone">
  <input type="button" id="btn" value="发送">
    <script>
        var boj=document.querySelector('#btn');
        var initTime=60;
        var times='';
        // 触发点击事件，发送
        boj.onclick=function(){
            // 禁用按钮
            boj.disabled=true;
            // 
            times=setInterval(function(){
                // 按钮值改变
                boj.value=initTime+'s之后重新获取';
                initTime--;
                // 判断倒计时是否为零，清楚倒计时
                if(initTime==0){
                    clearInterval(times);
                    boj.value='重新获取';
                    boj.disabled=false;
                    initTime=10;
                }
            },1000);
        }
    </script>
</body>

京东倒计时秒杀，每两小时一场

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .countdown {
      width: 190px;
      height: 260px;
      margin: 0 auto;
      background: #E83632;
      background: url(http://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);
    }

    .countdown .title {
      color: #fff;
      font-size: 30px;
      text-align: center;
      font-weight: bold;
      padding-top: 30px;
    }

    .countdown .desc {
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin-top: 100px;
      vertical-align: middle;
    }

    .countdown .desc>strong {
      font-size: 18px;
      vertical-align: middle;
      margin-right: 8px;
    }

    .countdown .time {
      width: 80%;
      height: 30px;
      margin: 0 auto;
      margin-top: 10px;
      color: #fff;
      font-size: 20px;
      margin-left: 25px;
    }

    .countdown .time>span {
      width: 30px;
      height: 30px;
      display: inline-block;
      background: #2f3430;
      margin-left: 5px;
      text-align: center;
      font-weight: bold;
      padding-top: 4px;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <div class="title">京东秒杀</div>
    <div class="desc">
      <strong id="h"></strong>点倒计时
    </div>
    <div class="time">
      <span class="h">1</span>
      :
      <span class="m">1</span>
      :
      <span class="s">1</span>
    </div>
  </div>
  <script>
    function fn() {
      // 1.获取当前时间
      var date = new Date();
      // 2.获取当前小时
      var hours = date.getHours();
      // 3.判断场次
      hours = hours % 2 != 0 ? hours - 1 : hours;
      // 4.小于10小时要补零
      hours < 10 && (hours = '0' + hours);
      //5. 获取节点,输出在页面中
      var h = document.querySelector('#h');
      h.innerHTML = hours;
      //6.设置两个小时后的时间，减去当前时间
      var endHours = new Date();
      endHours.setHours(hours - 0 + 2);
      endHours.setMinutes(0);
      endHours.setSeconds(0);
      // 7.结束时间减去当前时间
      var diffMs = endHours - date;
      // 得到倒计时的时间
      var h = parseInt(diffMs / 1000 / 60 / 60);
      var m = parseInt(diffMs / 1000 / 60 % 60);
      var s = parseInt(diffMs / 1000 % 60);
      // 输出到页面中
      document.querySelector('.h').innerHTML = h;
      document.querySelector('.m').innerHTML = m;
      document.querySelector('.s').innerHTML = s;
    }
    fn();
    setInterval(fn,1000);
  </script>
</body>

</html>