通过js进行简单的表单验证
是什么
1.当表单中的用户名和密码为空的时候，不让提交。
2.当用户名和密码输入不合法时，给出警示。
为什么
缓解服务器压力，即时给出提示。
具体实现
form标签回顾
1.action表示表单内容传递的地址。
2.method表示传递的方法，“get”表示公开传递的信息，“post”表示隐藏传递的信息。
onsubmit事件
相应的js代码的开头必须是一个 return ，如果返回为true，则提交表单信息，如果返回为false则不提交表达信息。
js中函数的返回值
1.通过return关键字返回函数的值。
2.函数在执行过 return 语句后立即停止执行代码。
<body>
<form action="#" method="get" onsubmit="return check()">
用户名：<input type="text" name="userName" /><br />
密码：<input type="password" name="userPassword" /><br />
<input type="submit" value="登录" />
</form>
<script type="text/javascript">
//1 获取元素
var inputs = document.getElementsByTagName("input");
//2 操作元素
function check(){
// 上面开始检查你要的元素中的内容，如果不符合就return fales
for(var i=0;i<inputs.length;i++){
if(inputs[i].value==null || inputs[i].value==""){
alert("用户名或密码不能为空！");
return false;
}
}
// 当代码执行到return后，后面的代码不会被执行
return true;
}
</script>
</body>
定时函数
定时函数简介
setInterval( fn，millisec )方法
可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行多次。
setTimeout( fn，millisec )方法
用于在指定的毫秒数后调用函数或计算表达式，只执示例行一次。
定时清除函数
| clearInterval( timer ) 方法 | 可取消由 setInterval() 设置的 timeout |
| clearTimeout( timer ) 方法 | 可取消由 setTimeout() 方法设置的 timeout |
注意： 清除函数启动后，定时函数如果执行到一半，会执行完以后再停止。
应用场景
计时器和动画效果
计时器实现
<body>
<h1>0</h1>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />
<input type="button" value="暂停" onclick="pause()" />
<script type="text/javascript">
// 1获取元素
var h=document.getElementsByTagName("h1")[0];
var timer=null;
// 2操作元素
function start(){
if(timer==null){
timer=setInterval(function(){
var t=h.innerHTML;
t++;
h.innerHTML=t;
},1);
}
}
function stop(){
pause();
h.innerHTML=0;
}
function pause(){
if(timer!=null){
clearInterval(timer);
timer=null;
}
}
</script>
</body>
三张图片轮播
简介
1.加载四张图片（第一张和第四张相同），另它们并排显示。
2.只利用一张图片大小的窗口来显示图片。
3.在短时间内，多次改变图片位置来实现图片滚动效果
4.当位置移动到第四张图片时，瞬间将第一张图片移到窗口，来实现轮流播放效果。
css
1.取消默认的margin和padding。并借助margin使这个效果图居中。
2.设置好div元素的宽高，把它作为窗口，并设置为窗口内的图片才能显示。
3.利用ul和li 来容纳这些图片。
具体实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0 auto;
padding: 0;
}
div{
width: 320px;
height: 180px;
position: relative;
overflow: hidden;
}
ul{
width: 1280px;
height: 180px;
position: absolute;
top: 0;
left: 0;
}
li{
list-style-type: none;
float: left;
width: 320px;
height: 180px;
}
</style>
</head>
<body>
<!-- div 320x180 -->
<!-- ul 1280x180 -->
<div>
<ul>
<li><img src="img/1.jpg" width="320" height="180" /></li>
<li><img src="img/2.jpg" width="320" height="180" /></li>
<li><img src="img/3.jpg" width="320" height="180" /></li>
<li><img src="img/1.jpg" width="320" height="180" /></li>
</ul>
</div>
<script>
var u = document.getElementsByTagName("ul")[0];
var ps = [0,-320,-640,-960];
var index = 0;
u.style.left = '0px';
setInterval(function(){
var i = parseInt(u.style.left);
i=i-2;
if(i<-960){
i=0;
}
u.style.left=i+"px";
},10);
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
