个人名片：
😊作者简介：一名大一在校生，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+'秒';//返回倒计时的字符串
}
实现效果如图所示：
勤学多练，大家可以跟着一起做一下，有什么不对的地方欢迎大家指正
