js对象案例练习

个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：python学不会123
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好js

生成验证码

题目：使用Math.random()静态函数可以返回0~1的随机一个数。注意：随机数或可能会是0，但一定小于1

  //获取指定范围的随机数
        var getRand = function (min, max) {
            return Math.random() * (max - min) + min;
        }
        console.log(getRand(10.1, 20.9));//13.841850648326592
        //获取指定范围的随机整数
        var getRand = function (min, max) {
            return parseInt(Math.random() * (max - min)) + min;
        }
        console.log(getRand(2, 4))//3
        //获取指定长度随机字符
        var getRandStr = function (length) {
            var _string = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//26个大写字母
            _string += 'abcdefghijklmnopqrstuvwxyz';
            _string += '0123456789-_';
            var _temp = '', _length = _string.length - 1//根据指定长度生成随机字符串
            for (var i = 0; i < length; i++) {//获取随机数字
                var n = parseInt(Math.random() * _length);//映射成字符
                _temp += _string[n];
            }
            return _temp;//返回映射后的字符串
        }
        console.log(getRandStr(6))//ZuDjwa

结果如图所示

设计计时器

🍐：使用对象属性设计一个时间显示牌
实现步骤如下：

1.设计时间显示函数，应该在该函数中先创建Date对象，获取当前时间，然后分别获取年、月、日、时、分、秒等，最后再组成一个时间字符串返回

 var showtime = function () {
            var nowdate = new Date();//创建Date对象,获取当前时间
            var year = nowdate.getFullYear(),//获取年份
                month = nowdate.getMonth() + 1//获取月份，getMonth()得到的是0-11，需要加1才能得到当前月份的值
            date = nowdate.getDate()//获取日期
            day = nowdate.getDay()//获取一周中的某一天，getDay()得到的是0-6
            week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
            h = nowdate.getHours()
            m = nowdate.getMinutes()
            s = nowdate.getSeconds()
            h = checkTime(h)  // 函数checkTime用于格式化时、分、秒
            m = checkTime(m)
            s = checkTime(s)
            return year + "年" + month + "月" + date + "日" + week[day] + " " + h + ":" + m + ":" + s;
        }

2.定义一个辅助函数，将1位数字的时间改为2位数字显示

 var checkTime = function (i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }

3.在页面中添加一个标签，设置她的id值

 <h1 id="showtime"></h1>

4.为标签绑定定时器，在定时器中设置每秒钟调用一次时间显示函数

   var div = document.getElementById("showtime");
        setInterval(function () {
            div.innerHTML = showtime();
        }, 1000);

完整代码实现如下：

<h1 id="showtime"></h1>
    <script>
        var showtime = function () {
            var nowdate = new Date();//创建Date对象,获取当前时间
            var year = nowdate.getFullYear(),//获取年份
                month = nowdate.getMonth() + 1//获取月份，getMonth()得到的是0-11，需要加1才能得到当前月份的值
            date = nowdate.getDate()//获取日期
            day = nowdate.getDay()//获取一周中的某一天，getDay()得到的是0-6
            week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
            h = nowdate.getHours()
            m = nowdate.getMinutes()
            s = nowdate.getSeconds()
            h = checkTime(h)  // 函数checkTime用于格式化时、分、秒
            m = checkTime(m)
            s = checkTime(s)
            return year + "年" + month + "月" + date + "日" + week[day] + " " + h + ":" + m + ":" + s;
        }
        var checkTime = function (i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        var div = document.getElementById("showtime");
        setInterval(function () {
            div.innerHTML = showtime();
        }, 1000);

实现效果如图所示：

设计倒计时显示器

实现思路：用结束时间减去现在时，获取时间差，再利用数学方法从时间差中分别获取日、时、分、秒等，再通过定时器设置每秒执行一次，实时更新效果

 <h1>暑假倒计时：
        <span id="showtime" style="color:red ;"></span>
    </h1>
    <script>
        //使用定时器设计每秒钟调用倒计时函数一次
        var div=document.getElementById('showtime');
       setInterval(function(){
          div.innerHTML=showtime();
       },1000) ;
       var showtime = function(){
        var nowtime=new Date()  //获取当前时间
        endtime= new Date("2023/6/29");// 定义结束时间
        var lefttime=endtime.getTime()-nowtime.getTime()//距离结束时间的毫秒数
        leftdate=Math.floor(lefttime/(1000*60*60*24))//计算天数
        lefthour=Math.floor(lefttime/(1000*60*60)%24)//计算小时数
        leftmiuntes=Math.floor(lefttime/(1000*60)%60)//计算分钟数
        lefts=Math.floor(lefttime/1000%60);//计算秒数
        return leftdate+'天'+lefthour+'小时'+leftmiuntes+'分'+lefts+'秒';//返回倒计时的字符串
        
       }
       

实现效果如图所示：

勤学多练，大家可以跟着一起做一下，有什么不对的地方欢迎大家指正