1. 实现一个简单的随机点名页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nightmare</title>
<style>
.bbb{
width: 150px;
height: 30px;
border: 1px black solid;
color: black;
text-align: center;
}
</style>
</head>
<body>
<div id="aaa" class="bbb" >点到的名字为...</div>
<script>
var list=["张三","李四","王二","麻子","杜十娘","西门吹雪","叶孤城"]
function nightMare() {
var div =document.getElementById("aaa")
if (list.length<1){
alert("没有同学可供选择")
return
} else{
var num=Math.floor(Math.random()*list.length)
div.innerText=list[num]
list.splice(num,1)
}
}
</script>
<button onclick="nightMare()">点名</button>
</body>
</html>
思路:
利用js将点名按钮触发实现点名
创建一个div标签供名字的出现,利用dom获取元素结点,
然后将点名的函数利用一个数组将名字存放,随机产生一个索引
最后将div的元素内容替换为数组中对应下标的内容.
(其中为了防止一个名字出现两次,将被点到名字的同学从数组中删除).
结果如图所示:
2. 实现Day01注册页面的相关功能(1,看不清换一张功能, 2,验证码判断)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function</title>
</head>
<body>
<table cellspacing="10px">
<tr>
<td>注册邮箱:</td>
<td><input></td>
</tr>
<tr>
<td></td>
<td>你还可以使用手机注册</td>
</tr>
<tr>
<td>创建密码:</td>
<td><input></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input></td>
</tr>
<tr>
<td align="right">性别:</td>
<td><input type="radio" name="aaa" value="1">男<input type="radio" name="aaa" value="2">女</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select><option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>年
<select><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>月
<select><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我正在:</td>
<td><select>
<option value="1">学习</option>
<option value="2">睡觉</option>
<option value="3">打游戏</option>
</select></td>
</tr>
<tr>
<td></td>
<td>
<img id="img1" src="verycode.gif"><zidingyi onclick="Change()">看不清,换一张?</zidingyi>
</td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><input id="inputStr"></td>
</tr>
<tr>
<td></td>
<td><img src="btn_reg.gif" onclick="Go()"></td>
</tr>
</table>
<script>
var listUrl=["1111.png","1234.png","2222.png","3333.png",]
var listNum=["1111","1234","2222","3333"]
var midTag=-1
function Change() {
var node=document.getElementById("img1")
var bool=true
while(bool){
var num=Math.floor(Math.random()*listUrl.length)
if (num!=midTag){//防止重复出现相同的图片
bool=false
midTag=num
}
}
node.src=listUrl[midTag]
}
function Go() {
var inputStr=document.getElementById("inputStr")
if (midTag==-1){
if (inputStr.value=="bnksu"){
alert("验证码正确")
} else{
alert("验证码错误")
}
}
var str=listNum[midTag]
if (inputStr.value==str){
alert("验证码正确")
} else{
alert("验证码错误")
}
}
</script>
</body>
</html>
思路:
实现方式和上面的点名差不多,只是多了一些判断的条件
创建两个数组一个存放验证码图片的地址,一个存放验证码上的内容,且下标相对应
更换验证码是随机的,且不能连续两次出现相同的验证码.
确认验证码的关键在于第一个图片的内容要单独进行判断.