没有视频看了,心里有点慌啊,像这种每天都会灌输很多知识的学习方式,我觉得提前预习真的是有奇效,不然不容易跟上老师的思维.
1.发送验证码:简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码</title>
<script type="text/javascript">
var sec = 59;
var timer;
function sendInfo(){
timer=window.setInterval(changeText, 1000);
}
function changeText(){
var bton = document.getElementById("bton");
bton.value = sec+"s后重新发送";
bton.disabled = "disabled";
sec--;
if(sec==0){
window.clearInterval(timer);
bton.value = "重新发送";
bton.removeAttribute("disabled");
sec=59;
}
}
</script>
</head>
<body>
<input type="text" /><input type="button" onclick="sendInfo()" id="bton" value="发送验证码">
</body>
</html>
2.全选功能:简单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
<script type="text/javascript">
function qx(){
var checkboxAll = document.getElementById("checkAll");
var inputObj = document.getElementsByName("check");
for(var i=0; i<inputObj.length; i++){
//反选功能
/*inputObj[i].checked = !inputObj[i].checked;*/
//全选功能
checkAll.checked ? inputObj[i].checked=true : inputObj[i].checked=false;
}
}
function checking(){
var inputObj = document.getElementsByName("check");
var checkboxAll = document.getElementById("checkAll");
for(var i=0;i<inputObj.length;i++){
//只要有一个复选框没选中,就进入if语句并结束函数
if(!inputObj[i].checked){
checkboxAll.checked = false;
return false;
}
}
checkboxAll.checked = true;
return true;
//另一种傻瓜式做法
/*if(inputObj[0].checked && inputObj[1].checked && inputObj[2].checked){
checkboxAll.checked = true;
}else {
checkboxAll.checked = false;
}*/
}
</script>
</head>
<body>
<table>
<tr>
<th>
<input type="checkbox" name="checkboxAll" id="checkAll" onclick="qx()"/>全选/全不选
</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" onclick="checking()"/>
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>￥200</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" onclick="checking()"/>
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>￥998</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" onclick="checking()"/>
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>￥88</td>
</tr>
</table>
</body>
</html>
3.表单验证:虽然只验证了两个,原理已明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript">
window.onload = function(){
//没有加var定义的全局变量
spanObj = document.getElementsByTagName("span");
v =document.form1.username;
v2 = document.form1.userpwd;
}
function fct1(){
//光标选中时,提示信息
spanObj[0].innerHTML = "请输入用户名";
spanObj[0].style.color = "#f00";
}
function fct2(){
//光标移开时,检查表单
if(v.value == ""){
//验证用户是否输入数据
spanObj[0].innerHTML = "用户名必须要填写";
spanObj[0].style.color = "#f00";
return false;
}else if(v.value.length<5 || v.value.length>16){
//验证用户名的长度是否符合要求
spanObj[0].innerHTML = "用户名必须在5-16位之间";
return false;
}else{
//验证用户名中是否含有特殊字符
var arr = ["*","%","&","<",">","/","\\","!","@","#"];
var length1 = arr.length;
var length2 = v.value.length;
for(var i=0;i<length1;i++){
for(var j=0;j<length2;j++){
if(arr[i]==v.value.charAt(j)){
spanObj[0].innerHTML = "用户名含有特殊字符";
spanObj[0].style.color = "#f00";
return false;
}
}
}
//前面验证通过则用户名验证通过
spanObj[0].innerHTML = "用户名合法";
spanObj[0].style.color = "#00f";
return true;
}
}
function fct3(){
//光标选中时,提示输入信息
spanObj[1].innerHTML = "请输入密码";
spanObj[1].style.color = "#f00";
}
function fct4(){
//验证用户是否输入数据
if(v2.value == ""){
spanObj[1].innerHTML = "密码还是要的,大哥!";
spanObj[1].style.color = "#f00";
return false;
}else if(v2.value.length<5 || v2.value.length>16){
//验证密码的长度是否符合要求
spanObj[1].innerHTML = "别太短,也别太长,5-16位!";
spanObj[1].style.color = "#f00";
return false;
}else{
//前面的验证通过则密码验证通过
spanObj[1].innerHTML = "Well Done!";
spanObj[1].style.color = "#00f";
return true;
}
}
//在提交表单时,再进行一次检查,是否所有的所填项目都符合要求
function checkForm(){
var res_1 = fct2();
var res_2 = fct4();
if(res_1 && res_2){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="index.php" onsubmit="return checkForm()" name="form1">
<table width="500" align="center" border="1" bordercolor="#ccc" cellpadding="5">
<caption><h2>表单验证</h2></caption>
<tr>
<td align="right">用户名:</td>
<td><input type="text" name="username" onfocus="fct1()" onblur="fct2()"></td>
<td width="250"><span></span></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="userpwd" onfocus="fct3()" onblur="fct4()"></td>
<td><span></span></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input type="submit"> <input type="reset" ></td>
</tr>
</table>
</form>
</body>
</html>
4.坑爹的三级联动,费老劲了,还不完善...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级联动菜单</title>
<script type="text/javascript">
arr_province = ["请选择省份","北京市","广东省","湖南省"];
arr_city = [
["请选择城市"],
["海淀区","宣武区","朝阳区","房山区"],
["广州市","深圳市","清远市","罗定市"],
["长沙市","常德市","岳阳市","永州市"],
];
//www.jq22.com
arr_area = [
[
["请选择地区"]
],
[
["中关","北理"],
["宣区","武区"],
["朝区","阳区"],
["房山","良乡"]
],
[
["天河","越秀"],
["罗湖","?"],
["清","远"],
["罗","定"]
],
[
["雨花","岳麓"],
["鼎城","澧县"],
["浏阳","楼"],
["冷水","东安"]
]
]
window.onload = function(){
//在省份下拉列表中写入省份数组
var province = document.form1.province;
var city = document.form1.city;
var area = document.form1.area;
province.length = arr_province.length;
for(var i=0; i<province.length; i++){
province.options[i].text = arr_province[i];
province.options[i].value = arr_province[i];
}
province.selectedIndex = 0;
var index = province.selectedIndex;
//在省份下拉列表中写入城市数组
city.length = arr_city[index].length;
for(var j=0; j<city.length; j++){
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
//在城市下拉列表中写入地区数组
city.selectedIndex = 0;
var index2 = city.selectedIndex;
area.length = arr_area[index][index2].length;
for(var k=0;k<area.length;k++){
area.options[k].text = arr_area[index][index2][k];
area.options[k].value = arr_area[index][index2][k];
}
}
//二级联动的实现
function changeSelected(changedIndex){
var city = document.form1.city;
city.length = arr_city[changedIndex].length;
for(var j=0; j<city.length; j++){
city.options[j].text = arr_city[changedIndex][j];
city.options[j].value = arr_city[changedIndex][j];
}
//三级联动功能的实现
var index2 = city.selectedIndex;
var area = document.form1.area;
area.length = arr_area[changedIndex][index2].length;
for(var k=0; k<area.length; k++){
area.options[k].text = arr_area[changedIndex][index2][k];
area.options[k].value = arr_area[changedIndex][index2][k];
}
//初始化
city.selectedIndex = 0;
area.selectedIndex = 0;
}
//二级列表联动三级下拉列表
function changeSelected2(changedIndex2){
var province = document.form1.province;
var city = document.form1.city;
var area = document.form1.area;
var index = province.selectedIndex;
area.length = arr_area[index][changedIndex2].length;
for(var i=0;i<area.length;i++){
area.options[i].text = arr_area[index][changedIndex2][i];
area.options[i].value = arr_area[index][changedIndex2][i];
}
area.selectedIndex = 0;
}
</script>
</head>
<body>
<form name="form1" method="post">
省份:<select name="province" onchange="changeSelected(this.selectedIndex)"></select>
城市:<select name="city" onchange="changeSelected2(this.selectedIndex)"></select>
地区:<select name="area"></select>
</form>
</body>
</html>
时间： 2024-10-14 15:23:16