目录
【2】求2/1,3/2,5/3,8/5,13/8,21/13,... 前20项之和。
【3】输入某年某月某日，判断这一天是这一年的第几天？（1980~2060)
【1】编写函数has(arr,60)判断数组中是否存在60这个元素，返回布尔类型。
一.while循环案例--篮球下落
篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度<0.1米.
解析：
思路：不知道循环次数====>while
若条件为真，则执行循环体,执行完循环体后，再次判断条件真假，直至条件为假跳出循环。
开始：高度：5米>最终目的0.1米====>条件为真进入循环
结束：0.00405第四次时<0.1==>条件为假输出结果 -->
<script>
var h = 5; //循环变量初始化
var count = 0;
while (h > 0.1) { //循环条件表达式
count++; //循环体
h *= 0.3; //使循环趋近于结束的条件
}
alert(count); //4次
</script>二、for循环案例
【1】阶乘求和：求1!+2!+3!+...+10!的值
解析:
思路：在和的循环里面嵌套阶乘的循环即可
<script>
var sum = 0;
for (var i = 1; i <= 10; i++) { //每个和
var jc = 1;
for (var j = 1; j <= i; j++) { //每个阶乘
jc = jc * j;
}
sum = sum + jc;
}
alert(sum); //4037913
</script>【2】求2/1,3/2,5/3,8/5,13/8,21/13,... 前20项之和。
<script>
var x = 2; //从2/1开始
var y = 1;
var sum = 0; //和初始化
//count项数：从第一项开始
for (var count = 1; count <= 20; count++) {
sum = sum + x / y;
x = x + y; //下一项的分子==前一项的分子+分母
y = x - y; //下一项的分母==自己的分子-前一项的分母
}
alert(sum); //32.66....
</script>【3】九九乘法表
<script>
function fun() {
// 九九乘法表 //每行有几个星星是由在第几行决定的，j决定高度
for (var j = 1; j <= 9; j++) { //j控制的是行数,i控制的是星星的个数
for (var i = 1; i <= j; i++) { //i的个数是由j决定的,i决定宽度
document.write(i + "*" + j + "=" + i * j + " ");
}
document.write("<br>");
}
}
fun();
</script>
倒着的九九乘法表：将外层循环改为for (var j = 9; j > 0; j--) {...}即可三、函数应用--回文判断
解析：回文数：一个五位数，个位与万位相同，十位与千位相同。
拓展：
水仙花数: abc == a*a*a + b*b*b + c*c*c【一个三位数个位十位百位的立方和等于该数本身】
这里着重练习依次提取多位数字中的每个数字
<script>
function come(i) {
if (i >= 10000 && i <= 99999) {
var a, b, c, d, e;
// 以5位数为例：*个位%10*和*最高位/单位*，*中间位/单位%10*
a = parseInt(i / 10000); //拿到万位数字
b = parseInt(i / 1000 % 10); //拿到千位数字
c = parseInt(i / 100 % 10); //拿到百位数字
d = parseInt(i / 10 % 10); //拿到十位数字
e = parseInt(i % 10); //拿到个位数字
if (e == a && d == b) {
console.log(i + "是回文数");
} else {
console.log(i + "不是回文数");
}
} else {
console.log(i + "不是五位数");
}
}
come(12321);
</script>四、事件与函数连用
【1】计算器
<script>
var oT1 = document.getElementById("t1");
var oT2 = document.getElementById("t2");
var oT3 = document.getElementById("t3");
var oBtn = document.getElementById("btn");
var oList = document.getElementById("list");
oBtn.onclick = function() {
switch (oList.value) {
case "+":
oT3.value = oT1.value / 1 + oT2.value / 1; //隐式转换
break;
case "-":
oT3.value = oT1.value - oT2.value;
break;
case "*":
oT3.value = oT1.value * oT2.value;
break;
case "/":
oT3.value = oT1.value / oT2.value;
break;
}
}
</script>【2】奇偶求和
问题：编写函数，当n为偶数时调用函数求1/2+1/4+...1/n;n为奇数时调用函数求1/1+1/3+...1/n
<script>
var oT1 = document.getElementById("t1");
var oT2 = document.getElementById("t2");
var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
var sum = 0;
if (oT1.value % 2 == 0) { //偶数
for (i = 2; i <= oT1.value; i += 2) { //从2开始,每次自增2
sum = sum + 1 / i;
}
oT2.value = sum;
} else { //奇数
for (i = 1; i <= oT1.value; i += 2) { //从1开始,每次自增2
sum = sum + 1 / i;
}
oT2.value = sum;
}
}
</script>【3】输入某年某月某日，判断这一天是这一年的第几天？（1980~2060)
<script>
var oT1 = document.getElementById("t1");
var oT2 = document.getElementById("t2");
var oT3 = document.getElementById("t3");
var oT4 = document.getElementById("t4");
var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
//借助isInputOk判断输入是否合法，一条不合法则停止判断，若都合法，则借助sumDay函数实现天数的相加
if (isInputOk(oT1.value / 1, oT2.value / 1, oT3.value / 1)) {
oT4.value = sumDay(oT1.value / 1, oT2.value / 1, oT3.value / 1);
} else {
oT4.value = "输入不合法";
}
}
function isInputOk(y, m, d) { //输入是否合法?
if (y < 1980 || y > 2040) {//年的判断
return false;
}
if (m < 1 || m > 12) {//月的判断
return false;
}
switch (m) {//用月实现天数的判断
case 12:
case 10:
case 8:
case 7:
case 5:
case 3:
case 1:
if (d < 1 || d > 31) {
return false;
}
case 11:
case 9:
case 6:
case 4:
if (d < 1 || d > 30) {
return false;
}
case 2:
if (isLeapYear(y)) {
if (d < 1 || d > 29) {
return false;
}
} else {
if (d < 1 || d > 28) {
return false;
}
}
} //switch结束
return true; //除去错误可能,则为正确输入.只要出错立即中断判断
}
function sumDay(y, m, d) {//用switch的穿透效果实现天数的向下相加结果
var sum = 0;
switch (m - 1) {
case 11:
sum += 30;
case 10:
sum += 31;
case 9:
sum += 30;
case 8:
sum += 31;
case 7:
sum += 31;
case 6:
sum += 30;
case 5:
sum += 31;
case 4:
sum += 30;
case 3:
sum += 31;
case 2:
if (isLeapYear(y)) {
sum += 29;
} else {
sum += 28;
}
case 1:
sum += 31;
}
sum += d;
return sum;
}
function isLeapYear(y) {//函数判断是否闰年？
if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
return true;
} else {
return false;
}
}
</script>五、数组
【1】编写函数has(arr,60)判断数组中是否存在60这个元素，返回布尔类型。
<script>
var arr = [1, 2, 3, 4, 5];
// 方式一
// function has(arr, n) {
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] == n) {
// return true;
// }
// }
// return false;
// }
// console.log(has(arr, 60));
// 方法二
var flag = has(arr, 60);
function has(arr, n) {
var flag = false;
for (var i = 0; i < arr.length; i++) {
if (arr[i] == n) {
flag = true;
break;
}
}
return flag;
}
console.log(flag);//有60输出true;无60输出false
</script>【2】对称数组
问题：传入一个数组，起始元素类型与个数皆未知，返回新数组，由原数组的元素正反序拼接而成
传入[“One”, “Two”,”Three”] 返回[“One”, “Two”, “Three”,”Three”,”Two”, “One”]
<script>
function fun(arr) {
// 使用slice() /concat()返回一个子数组， 再进行reverse就可以保留原数组brr
return arr.concat().concat(arr.reverse());
// 输出结果： ['One', 'Two', 'Three', 'Three', 'Two', 'One']
}
var arr = ["One", "Two", "Three"];
console.log(fun(arr));
</script>【3】数组去重
<script>
var arr = [2, 2, 2, 4, 3, 5, 7, 8, 6, 4, 6, 4, 3];
var brr = [];
for (var i = 0; i < arr.length; i++) {
//在brr里面没有找到arr[i]这个元素
if (brr.indexOf(arr[i]) == -1) {
//就把没找到的元素尾插至brr中
brr.push(arr[i]);
}
}
console.log(brr); //[2, 4, 3, 5, 7, 8, 6]==>去重成功！
</script>六、字符串
【1】统计指定字符串中个具体元素的个数
<script>
var str = "jhgfds5432FDGHJ @#$%^&*";
var big = 0; //大写字母
var small = 0; //小写字母
var num = 0; //大写字母
var space = 0; //空格
var other = 0; //其他
function fun(str) {
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) > "0" && str.charAt(i) < "9") { //该API返回下标对应的字符
num++;
} else if (str.charAt(i) > "a" && str.charAt(i) < "z") {
small++;
} else if (str.charAt(i) > "A" && str.charAt(i) < "Z") {
big++;
} else if (str.charAt(i) == " ") {
space++;
} else {
other++;
}
}
}
fun(str);
console.log(big, small, num, space, other); //5 6 4 4 7
</script>【2】统计任意字符串中所有元素的个数
<script>
function Strnum(str) {
var obj = {};
for (var i = 0; i < str.length; i++) {
var x = str[i];
//需要把每一个字符串中的元素拿出来
if (obj[x]) {
//如果对象中存在属性是x
obj[x]++;
} else {
obj[x] = 1;
}
}
console.log(obj);
}
Strnum("！@#￥！@#qazqaz121212");
</script>【3】随机生成4位验证码
<script>
function rand(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
var count = 0;
var time = setInterval(function() {
if (count == 5) {
clearInterval(time);
}
var str = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890";
var yzm = " ";
for (var i = 0; i < 4; i++) {
yzm += str.charAt(rand(0, 62));
}
console.log(yzm);
}, 1000)
</script>【4】随机色
<script>
setInterval(function() {
var oLis = document.getElementsByTagName("li");
var color = "#";
var str = "0123456789abcdef";
for (var i = 0; i < oLis.length; i++) {
color = "#";
for (var j = 0; j < 6; j++) {
color += str.charAt(rand(0, 15));
}
oLis[i].style.backgroundColor = color;//每个li色彩随机变化
}
}, 50)
</script>[5]敏感词过滤
<script>
// 3. 敏感词过滤。（ 用户输入的内容中的敏感词替换为 * ）
var str = "今天有个傻子在旁边大喊大叫，影响了我的操作。";
var arr = ["傻子", "tmd", "操"];
for (var i = 0; i < arr.length; i++) {
str = str.replace(arr[i], "*");
}
console.log(str);
</script>七、Date
【1】10秒倒计时
<body>
<div id="box">
<span id="num">10</span>
</div>
</body>
</html>
<script>
var oBox = document.getElementById("box");
var oNum = document.getElementById("num");
time = setInterval(function() { //循环定时器让时间流动
oNum.innerHTML--; //小盒子内的值由大变小【10秒倒计时】
if (oNum.innerHTML < 0) { //如果值为0则定时器关闭，且外侧大盒子消失
clearInterval(time);
oBox.style.display = "none";
}
}, 1000)
</script>八、DOM节点
【1】创建3*3表格并添加删除指定行的tr
<script>
var oTable = document.createElement("table");
oTable.border = "1px"; //边框线
var count = 0; //文本内容
for (var i = 0; i < 3; i++) {
var oTr = document.createElement("tr"); //创建3个tr
for (var j = 0; j < 3; j++) {
var oTd = document.createElement("td"); //在tr里面创建td
oTd.innerHTML = ++count; //文本内容依次增加
oTr.appendChild(oTd);
}
let oTdDel = document.createElement("td"); //删除的tr
oTdDel.innerHTML = "删除";
oTr.appendChild(oTdDel); //追加至每个tr后面
oTdDel.onclick = function() {
//关键思路：找到删除键的父元素，this指向自己本身,不用的话将var改为let
oTdDel.parentNode.remove(); //当点击删除键删除对应的tr
}
oTable.appendChild(oTr);//创建节点由外到内，追加节点反之
}
document.body.appendChild(oTable);
console.log(oTable.innerHTML);
</script>【2】选项卡
<body>
<div class="wrap">
<ul>
<li>女装</li>
<li>童装</li>
<li>宠物装</li>
<li>男装</li>
</ul>
<div class="box"></div>
</div>
</body>
</html>
<script>
var oLis = document.getElementsByTagName("li");
var oBox = document.querySelector(".box");
for (var i = 0; i < oLis.length; i++) {
//添加自定义属性,存储当前元素的下标=====》dom元素.属性名 = 属性值;
oLis[i].index = i;
oLis[i].onclick = function() {
for (var j = 0; j < oLis.length; j++) {
if (j == this.index) {
oLis[j].className = "newStyle";//style样式：橘字体绿背景
} else {
oLis[j].className = "oldStyle";//style样式：黑字白板
}
}
switch (this.index) {
case 0://第一个li对应的盒子
oBox.style.backgroundColor = "red";
break;
case 1://第两个li对应的盒子
oBox.style.backgroundColor = "yellow";
break;
case 2://第三个li对应的盒子
oBox.style.backgroundColor = "blue";
break;
case 3://第四个li对应的盒子
oBox.style.backgroundColor = "green";
break;
}
}
}
</script>【3】添加新的li并使其划过变色（普通版）
<body>
<input type="text" placeholder="请输入你的编程语言" id="content">
<button class="jia">添加节点</button>
<button class="del">删除节点</button>
<ul>
<li>111</li>
<li>222</li>
</ul>
</body>
<script>
var oLis = document.getElementsByTagName("li");
for (var i = 0; i < oLis.length; i++) {
oLis[i].onmouseover = function() {
this.style.backgroundColor = "hotpink";
}
oLis[i].onmouseout = function() {
this.style.backgroundColor = "";
}
}
var oUl = document.querySelector("ul");
var oInput = document.querySelector("#content");
var oBtn = document.getElementsByTagName("button");
oBtn[0].onclick = function() {
if (oInput.value != "") {
var oNewLis = document.createElement("li"); //创建新的li节点
oNewLis.innerHTML = oInput.value; //将输入的内容传给li标签
oInput.value = "";
oUl.appendChild(oNewLis); //追加节点
}
for (var i = 0; i < oLis.length; i++) {
oLis[i].onmouseover = function() {
this.style.backgroundColor = "hotpink";
}
oLis[i].onmouseout = function() {
this.style.backgroundColor = "";
}
}
}
oBtn[1].onclick = function() {
// oNewLis.remove(); //依次将添加的节点删除==》删除失败
oUl.lastElementChild.remove(); //删除成功
}
</script>九、事件流
【1】图片跟随鼠标移动
<script>
//图片一定要绝对定位
var oBox = document.querySelector("div");
document.onmouseover = function(evt) {
var e = evt || event;
//鼠标位置始终在盒子中心
oBox.style.top = e.pageY - oBox.offsetHeight / 2 + "px";
oBox.style.left = e.pageX - oBox.offsetWidth / 2 + "px";
}
</script>【2】下拉菜单高亮
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
min-height: 80px;
margin: 5px auto;
}
#txt {
width: 196px;
height: 38px;
text-align: center;
}
ul {
list-style: none;
width: 200px;
display: none;
}
li {
height: 40px;
padding: 0 25px;
line-height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" />
<ul>
<li>JAVA</li>
<li>C++</li>
<li>HTML5</li>
<li>C语言</li>
<li>Python</li>
</ul>
</div>
</body>
</html>
<script>
var btn = document.querySelector('#txt');
var oUl = document.querySelector('ul');
var items = oUl.children;// 等同于var oLis = document.querySelectorAll('li');
btn.onclick = function(eve) { //点击文本框时UL出现
var e = eve || event; // 兼容性阻止事件冒泡
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
oUl.style.display = 'block';
}
document.onclick = function() {
oUl.style.display = 'none'; //点击大白板时UL消失
}
for (let i = 0; i < items.length; i++) {
items[i].onmouseover = function() { //当每个li被鼠标划过时变绿
items[i].style.backgroundColor = 'green';
}
items[i].onmouseout = function() { //当每个li被鼠标划出时恢复
items[i].style.backgroundColor = '';
}//划入划出效果类似以下的划入内for循环
// for (var j = 0; j < items.length; j++) {
// items[j].style.backgroundColor = '';
// } //先让每一个li的背景颜色都不显示
// this.style.backgroundColor = 'green'; //再将新的样式给每个li
items[i].onclick = function() { //当每个li被点击时
btn.value = this.innerHTML; //将li的值传给input的value里面
}
}
</script>【3】添加新的li并使其划过变色（事件委托）
<script>
//事件委托好处:
//场景:为未来添加的子元素提前绑定事件
var oBtnjia = document.querySelector(".jia");
var oBtndel = document.querySelector(".del");
var oUl = document.querySelector("ul");
var oInput = document.querySelector("input");
oUl.addEventListener("mouseover", function(evt) {//划入每个li变绿
var e = evt || event;
var target = e.target || e.srcElement;
if (target.tagName == "LI") {
target.style.backgroundColor = 'hotpink';
}
});
oUl.addEventListener("mouseout", function(evt) {//划出每个li恢复
var e = evt || event;
var target = e.target || e.srcElement;
if (target.tagName == "LI") {
target.style.backgroundColor = '';
}
});
oBtnjia.onclick = function() {//添加新的li节点
if (oInput.value != "") {
var oLi = document.createElement("li");
oLi.innerHTML = oInput.value;
oInput.value = "";
oUl.appendChild(oLi);
}
}
oBtndel.onclick = function() {//删除最后一个li
oUl.lastElementChild.remove();
}
</script>【4】完美拖拽
oBox.ondblclick = function() {
if (oBox.offsetWidth == 400) {
// 借助声明提升将nx,ny变为全局变量,寄存盒子左顶点位置
nx = oBox.style.left;
ny = oBox.style.top;
// 双击盒子，盒子与页面同宽同高
oBox.style.width = window.innerWidth + "px";
oBox.style.height = window.innerHeight + "px";
// 确保与页面一致
oBox.style.left = "0px";
oBox.style.top = "0px";
} else {
oBox.style.width = '400px';
oBox.style.height = '300px';
// 缩小后回到原来位置，不加"px"
oBox.style.left = nx;
oBox.style.top = ny;
}
}【5】复选框
<body>
<p>请选择你擅长的编程语言：</p>
<!-- onchange 事件也可用于单选框与复选框改变后触发的事件。 -->
<input type="checkbox" name="" id="all" value="" onchange="checkChange()" /><span>全选/全不选</span><br>
<input type="checkbox" name="" id="" class="input" /><span>JAVA</span>
<input type="checkbox" name="" id="" class="input" /><span>Python</span>
<input type="checkbox" name="" id="" class="input" /><span>C++</span>
<input type="checkbox" name="" id="" class="input" /><span>HTM5<span><br>
<div>
<button id="btn1" onclick="checkAll(true)" >全选</button>
<button id="btn2" onclick="checkAll(false)" >全不选</button>
<button id="btn3" onclick="checkNo()">反选</button>
</div>
</body>
</html>
<script>
var oAll = document.querySelector("#all"); //全选/全不选单选框
var oInput = document.getElementsByClassName('input'); //拿到所有input
function checkAll(type) {
for (var i = 0; i < oInput.length; i++) {
oInput[i].checked = type;
}
}
function checkNo(){//反选
for(var i=0;i<oInput.length;i++){
oInput[i].checked = !oInput[i].checked;
}
}
function checkChange() {//全选/全不选单选框,针对复选框，单选框不行
checkAll(oAll.checked);//调用函数【实参】
}
</script>【6】鼠标轨迹
document.body.onmousemove = function(evt) {
var d = document.createElement("div");
var e = evt || event;
d.style.width = "10px";
d.style.height = "10px";
d.style.backgroundColor = "blue";
d.style.borderRadius = "50%";
d.style.position = "absolute";
document.body.appendChild(d); //一定要有绝对定位脱离文档流，否则轨迹一直向下
//总结：父元素.appendChild()方法必须和 document.createElement()连用。
d.style.left = e.pageX + "px";
d.style.top = e.pageY + "px";
oP1.innerHTML = d.style.left;//将鼠标坐标轨迹显示在大白板
oP2.innerHTML = d.style.top;
}十、正则验证
【1】综合表单验证
<script type="text/javascript">
var oF = document.querySelector("form");
var oInputs = document.getElementsByTagName("input");
var oSpan = document.getElementsByTagName("span");
var oyCode = document.querySelector("#yCode"); //验证码输入
var osCode = document.querySelector("#sCode"); //验证码生成
var oNew = document.querySelector("#new"); //验证码刷新
var flagName = false; //姓名
var flagAge = false; //年龄
var flagIsCheckedGender = false; //性别
var flagIsCheckedHobby = false; //爱好
var flagPwd = false; //密码强弱判断
//flagPwd 只能===强
var regNum = /^\d+$/;
var regLetter = /^[a-zA-Z]+$/;
var regChar = /^[!@#$%]+$/;
//flagPwd 至少包含===弱
var _regNum = /\d+/;
var _regLetter = /[a-zA-Z]+/;
var _regChar = /[!@#$%]+/;
var flagReset = false; //确认密码
var flagPhone = false; //手机号
var flagQq = false; //QQ
var flagEmail = false; //邮箱
var flagPostcode = false; //邮编
var flagCard = false; //身份证
var flagCode = false; //验证码
//================================================姓名判断
oInputs[0].onblur = function() {
//姓名： 单词字符组成 4 - 10 为， 不能用数字开头
var regName = /^\D[A-z]{3,10}$/;
if (regName.test(this.value)) {
oSpan[0].innerHTML = "姓名格式正确";
flagName = true;
} else {
oSpan[0].innerHTML = "姓名格式错误";
flagName = false;
}
}
//================================================年龄判断
oInputs[3].onblur = function() {
// 年龄： 只能由数字组成 年龄不能为负数
var regAge = /^\d{1,3}$/;
if (regAge.test(this.value)) {
oSpan[2].innerHTML = "年龄格式正确";
flagAge = true;
} else {
oSpan[2].innerHTML = "年龄格式错误";
flagAge = false;
}
}
//================================================性别判断
function IsCheckedGender() {
var oGender = document.getElementsByName("gender");
for (var i = 0; i < oGender.length; i++) {
if (oGender[i].checked) {
// 肯定有一个被选中了
flagIsCheckedGender = true;
return flagIsCheckedGender;
}
}
flagIsCheckedGender = false;
return flagIsCheckedGender;
}
//================================================爱好判断
function IsCheckedHobby() {
var oHobby = document.getElementsByClassName("hobby");
for (var i = 0; i < oHobby.length; i++) {
if (oHobby[i].checked) {
// 肯定有一个被选中了
flagIsCheckedHobby = true;
return flagIsCheckedHobby;
}
}
flagIsCheckedHobby = false;
return flagIsCheckedHobby;
}
//================================================密码判断
oInputs[4].onblur = function() {
// 密码：6-18位字符组成 有密码强弱验证
var regPwd = /^.{6,18}$/;
if (regPwd.test(this.value)) {
if (regNum.test(this.value) || regLetter.test(this.value) || regChar.test(this.value)) {
oInputs[4].style.backgroundColor = "red";
console.log("弱");
} else if (_regNum.test(this.value) && _regLetter.test(this.value) && _regChar.test(this.value)) {
oInputs[4].style.backgroundColor = "green";
console.log("强");
} else {
oInputs[4].style.backgroundColor = "yellow";
console.log("中");
}
oSpan[3].innerHTML = "密码格式正确";
flagPwd = true;
} else {
oSpan[3].innerHTML = "密码格式错误";
flagPwd = false;
}
}
//================================================确认密码判断
oInputs[5].onblur = function() {
// 确认密码和密码一样
var regReset = /^.{6,18}$/;
if (regReset.test(this.value) && oInputs[4].value === oInputs[5].value) {
oSpan[4].innerHTML = "确认密码格式正确";
flagReset = true;
} else {
oSpan[4].innerHTML = "确认密码格式错误";
flagReset = false;
}
}
//================================================手机号判断
oInputs[6].onblur = function() {
// 手机号： 15 13 18 开头
var regPhone = /^1[358]\d{9}$/;
if (regPhone.test(this.value)) {
oSpan[5].innerHTML = "手机格式正确";
flagPhone = true;
} else {
oSpan[5].innerHTML = "手机格式错误";
flagPhone = false;
}
}
//================================================QQ号判断
oInputs[7].onblur = function() {
// qq ： 5-12位数字 第一位不能是0
var regQq = /^[1-9]\d{4,11}$/;
if (regQq.test(this.value)) {
oSpan[6].innerHTML = "QQ号格式正确";
flagQq = true;
} else {
oSpan[6].innerHTML = "QQ号格式错误";
flagQq = false;
}
}
//================================================邮箱判断
oInputs[8].onblur = function() {
// 邮箱： 必须有@符号
var regEmail = /^([A-z\d])+@[A-z\d]+\.[A-z]{2,4}$/;
if (regEmail.test(this.value)) {
oSpan[7].innerHTML = "邮箱格式正确";
flagEmail = true;
} else {
oSpan[7].innerHTML = "邮箱格式错误";
flagEmail = false;
}
}
//================================================邮编判断
oInputs[9].onblur = function() {
// 邮编：6个数字
var regPostcode = /^\d{6}$/;
if (regPostcode.test(this.value)) {
oSpan[8].innerHTML = "邮编格式正确";
flagPostcode = true;
} else {
oSpan[8].innerHTML = "邮编格式错误";
flagPostcode = false;
}
}
//================================================身份证判断
oInputs[10].onblur = function() {
// 身份证： 18位 最后一位考虑有x
var regCard = /^\d{17}[\dx]$/;
if (regCard.test(this.value)) {
oSpan[9].innerHTML = "身份证格式正确";
flagCard = true;
} else {
oSpan[9].innerHTML = "身份证格式错误";
flagCard = false;
}
}
//================================================验证码判断
function getRandomInt(min, max) {
return min + parseInt(Math.random() * (max - min + 1));
}
function getValidateString() {
var min, max;
var res = "";
for (var i = 0; i < 4; i++) {
// a-z：97-122，A-Z：65-90，0-9：48-57。
switch (getRandomInt(1, 3)) {
case 1:
min = 48;
max = 57;
break;
case 2:
min = 65;
max = 90;
break;
case 3:
min = 97;
max = 122;
break;
}
var randomInt = getRandomInt(min, max);
res += String.fromCharCode(randomInt);
}
return res;
}
oNew.onclick = function() { //刷新
var res = getValidateString();
console.log(res);
osCode.innerHTML = res;
}
oyCode.onblur = function() { //input输入
// 输入的验证码必须和红色框中的相同点击看不清可以实现验证码的切换 验证码由字母 数字组成
var regCode = /^[A-z\d]{4}$/;
if (regCode.test(this.value) && oyCode.value === osCode.innerHTML) {
console.log("验证码格式正确");
alert("验证码格式正确");
flagCode = true;
} else {
console.log("验证码格式错误");
alert("验证码格式错误");
flagCode = false;
}
}
oF.onsubmit = function() {
IsCheckedGender();
IsCheckedHobby();
// getValidateString()
if (flagName && flagAge && flagPwd && flagReset && flagPhone && flagQq && flagEmail && flagPostcode && flagCard && flagIsCheckedGender && flagIsCheckedHobby && flagCode) {
return true;
} else {
return false;
}
}
</script>
十一、ES6
【1】五星评分
<script>
let oUL = document.querySelector("ul");//ul里面放5个li，用精灵图放星星
oUL.onmousemove = function(evt) {
let e = evt || event;
for (let i = 0; i < oUL.children.length; i++) {
if (e.pageX > i * oUL.children[0].offsetWidth) {//自己以及之前的变亮
oUL.children[i].style.background = "url(img/star.gif) 0 -28px";
} else if (e.pageX < i * oUL.children[0].offsetWidth) {//自己之后的不变
oUL.children[i].style.background = "url(img/star.gif) 0 0";
}
}
}
oUL.onclick = function() {
oUL.onmousemove = "none";//点击该星星时定住，不再往后变化
}
</script>【2】ES6字符串模板
oLis[i].onmousemove = function(evt) {
var e = evt || event;
oBox.style.left = e.pageX + 10 + "px";//鼠标距离盒子左顶点有10px距离
oBox.style.top = e.pageY + 10 + "px";
// ES6添加变量
// ``[英文状态下数字1前面的“波浪”]
// 支持换行， //``的变量必须用${变量}
oBox.style.backgroundImage = `url(img/shirt_${i+1}_big.jpg)`;
}
}十二、运动
【1】广告跟随（缓冲运动）
<script>
let oBox = document.querySelector("div");
let oImage = document.querySelector("img");
window.onscroll = function() { //获取浏览器滚动条高度
var Top = document.body.scrollTop || document.documentElement.scrollTop;
startMove(oImage, 0 + Top);//图片在css里面要绝对定位
}
var timer = null;
function startMove(obj, target) {
clearInterval(timer);
timer = setInterval(function() {//缓冲运动核心算法
let speed = (target - obj.offsetTop) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetTop == target) {
clearInterval(time);
} else {
obj.style.top = obj.offsetTop + speed + "px";
}
}, 50)
}
</script>【2】图片的淡入淡出
<script>
var oBox = document.querySelector("div");
var time = null;
function startMove(obj, target) {
clearInterval(time);
time = setInterval(function() { //domStyle属性中行外样式的读
let speed = target > getComputedStyle(oBox, false)["opacity"] ? 0.01 : -0.01;
oBox.style.opacity = getComputedStyle(oBox, false)["opacity"] / 1 + speed;
if (oBox.style.opacity == target) {
clearInterval(time);
}
}, 20)
} //盒子里的图片最开始的透明度是0.5
oBox.onmouseover = function() {
startMove(oBox, 1); //target==1[0.5变为1]
}
oBox.onmouseout = function() {
startMove(oBox, 0); //target==0[0.5变为0]
}
</script>
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
