生成验证码
题目：使用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+'秒';//返回倒计时的字符串 }
实现效果如图所示：
勤学多练，大家可以跟着一起做一下，有什么不对的地方欢迎大家指正
