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-6week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]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-6week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]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+'秒';//返回倒计时的字符串}

实现效果如图所示：

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