JS(六)
没有视频看了,心里有点慌啊,像这种每天都会灌输很多知识的学习方式,我觉得提前预习真的是有奇效,不然不容易跟上老师的思维.
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>
JS(六)的更多相关文章
- node.js(六) UTIL模块
1.inspect函数的基本用法 util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象转换为字符串的函数,通常用于调试和错误输出.它至少 ...
- Ionic Js六：切换开关操作
以下实例中,通过切换不同开关 checked 显示不同的值,true 为打开,false 为关闭. HTML 代码 <ion-header-bar class="bar-positiv ...
- Alt.js的入门
一.什么是Alt altJS是基于Flux使用Javascript应用来管理数据的类库,它简化了flux的store.actions.dispatcher. 关于Flux,以下链接都做了很好的诠释 h ...
- node.js核心技术
一.知识结构: http模块:配置简单 的web服务,npm/cnpm工具 express框架:express中间件进行服务配置:路由:请求处理: DB服务:学习使用mysql关系型数据库: web接 ...
- javascript framework js常用框架
js常用框架 一.node.js 二.angularjs.js 三.react.js 四.webpack.js 五.flux.js 六.vue.js 七.bootstrap ...
- 招聘.NET开发人员(截止于2015-06-15)
文章更新 2015-06-15 01:00AM: 感谢各位的支持,简历和解决方案接收截止.2015-06-08 08:30AM: 已经收到一些简历和解决方案,正在筛选中.职位仍然开放,欢迎发送简历及解 ...
- IE6/7/8中parseInt第一个参数为非法八进制字符串且第二个参数不传时返回值为0
JavaScript中数字有十进制.八进制.十六进制.以"0"开头的是八进制,"0x"或"0X"开头的是十六进制. parseInt用来把字 ...
- 1234['toString']['length'] 等于啥？
首先说该题的答案:1 这是我在一问一答上做的一个选择题,题目虽小,但是包含内容很多,很多网友斥责此题操蛋,恶心.其实只要我们细心的去理解,这段代码有很多值得我们记住的知识点. 1.[]的作用 []是j ...
- IT薪酬
新加坡IT薪酬 2014-06-12 12:51 by 圣殿骑士, 8856 阅读, 37 评论, 收藏, 编辑 很多朋友发邮件或留言问我关于新加坡IT薪酬的问题,由于前段时间比较忙,所以没有及时一一 ...
随机推荐
- 【移动开发】Android中WIFI开发总结（二）
搞了好几天终于有点眉目了,这里接着总结一下Android中WiFi的使用,在前面(http://smallwoniu.blog.51cto.com/3911954/1334951)我们已经简单了解了W ...
- 06-自定义Attribute标记案例
自定义Attribute: 1)Attribute都从System. Attribute类继承,类名一般以Attribute结尾 2) 标记类的用途—AttributeUsage标记(标记的标记):A ...
- javascript基础之for循环
1.数组定义声名 var arry = [1,2,3,4,5] //相当与var arry = Array(1,2,3,4,5) 2.数据的增删改查 var arry = [1,2,3,4,5] ...
- Win7上IIS发布网站系统\部署项目
1.系统已经安装IIS,如果没有安装,请到[控制面板]→[程序]→[程序和功能]→[打开或关闭Windows功能],选中Internet 信息服务Web管理工具下面的所有选项,确定:如下图 2.发布文 ...
- Android ScrollView 嵌套 ListView、 ListView 嵌套ScrollView Scroll事件冲突解决办法
本人菜鸟一名,最近工作了,开始学习Android. 最近在做项目的时候,UX给了个design,大概就是下拉刷新的ListView中嵌套了ScrollView,而且还要在ScrollView中添加动画 ...
- Hadoop 实现对Value倒序排序
数据源 A B C D Z 要实现的输出 Z D B C A 看字符顺序,其实什么也没有,只是按照后面的数字进行一次倒序排序,实现思路,1利用hadoop自带的排序功能,2.KV互换 实现代码 pub ...
- codeforces 672 D
题目链接:http://codeforces.com/problemset/problem/672/D 题目大意:进行k次操作,每次将最大值集合中最大值-1,最小值+1,问你K次操作之后,最大值和最小 ...
- css图片磨砂化
Css代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...
- AngularJs 如何监视外部变量是否改变？ 如何使用$cookieStore保存cookie？
1. 如何监视外部变量是否改变? 如果我们要求:在$scope之外改变一个外部变量时,触发一些操作.我们可以将外部变量写进$watch中,如图中所示.返回的n表示newValue,即新的值.o表示ol ...
- Asp.net Core 缓存 MemoryCache 和 Redis
Asp.net Core 缓存 MemoryCache 和 Redis 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 经过 N 久反复的尝试,翻阅了网上无数的资料,GitH ...