JavaScript入门 学习笔记6—— JavaScript案例
JavaScript案例
发送短信验证码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送短信验证码</title>
</head>
<body>
<input type="text" placeholder="请输入您的手机号码"
/><button id="btn">发送短信验证码</button>
<script type="text/javascript">
var btnObj=document.getElementById("btn");
var i=3;
var timer;
btnObj.onclick=function(){
//将当前按钮设置为禁止点击
this.disabled=true;
//清除上一个定时器
clearInterval(timer);
timer=setInterval(function(){
if(i<=0){
clearInterval(timer);
btnObj.disabled=false;
btnObj.innerHTML="重新发送验证码";
i=3;
}else{
btnObj.innerHTML="还剩下"+ i +"秒";
i--;
}
},1000);
}
</script>
</body>
</html>
全选/全不选
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选全不选</title>
</head>
<body>
<table>
<tr>
<th>
<input type="checkbox" name="" id="checkAll" />全选/全不选
</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>¥200</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>¥998</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>¥88</td>
</tr>
</table>
<script type="text/javascript">
var checkAll=document.getElementById("checkAll");
var check=document.getElementsByName("check");
//实现复选按钮跟随全选结果
checkAll.onclick=function(){
for(var i=0;i<check.length;i++){
check[i].checked=checkAll.checked;
}
}
//实现全选按钮跟随复选的结果
for(var i=0;i<check.length;i++){
check[i].onclick=function(){
var flag=true;
for(var j=0;j<check.length;j++){
if(!check[j].checked){
flag=false;
break;
}
}
checkAll.checked=flag;
}
}
</script>
</body>
</html>
图片轮播
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
body{color:#333;font-size:12px;line-height:20px;}
ul,li{list-style:none;}
#content{margin:0 auto;width:540px;}
#content .scroll_top{width:540px;height:51px;background:#099;}
#content .scroll_mid{
width:533px;
padding:5px 0 5px 5px;
border-left:1px solid #d6d5d6;
border-right:1px solid #d6d5d6;
background:#f2f2f3;
}
#content img{
height:110px;
}
#scroll_number{
float:right;
padding-right:10xp;
}
#scroll_number li{
margin-top:5px;
width:13px;
height:13px;
line-height:16px;
border:1px solid #999;
cursor:pointer;
text-align:center;
}
#content .scroll_end{
width:540px;
height:8px;
background:#099;
margin-bottom:10px;
}
.scroll_number_out{}
.scroll_number_over{
background:#f00;
color:#FFF;
font-weight:bold;
}
</style>
<body>
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid"><img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_sroll" onmouseover="stopScroll()" onmouseout="goon()"/>
<div id="scroll_number">
<ul>
<li onmouseover="stopScroll(1)" class="scroll_number_over" onmouseout="goon()">1</li>
<li onmouseover="stopScroll(2)" onmouseout="goon()">2</li>
<li onmouseover="stopScroll(3)" onmouseout="goon()">3</li>
<li onmouseover="stopScroll(4)" onmouseout="goon()">4</li>
<li onmouseover="stopScroll(5)" onmouseout="goon()">5</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
</div>
</body>
<script type="text/javascript">
var imgObj=document.getElementById("dd_sroll");
var divObj=document.getElementById("scroll_number");
var listObj=document.getElementsByTagName("li");
//开启定时器
var timer=setInterval("changeImgSrc()",1000);
//定时器函数实现每隔一秒更换图片
var i=1;
function changeImgSrc(){
//给所有的li标签清除class属性
for(var j=0;j<listObj.length;j++){
listObj[j].removeAttribute("class");
}
//给指定的li标签加上class属性,值为scroll_number_over
listObj[i-1].setAttribute("class","scroll_number_over");
imgObj.src="images/dd_scroll_"+i+".jpg";
i++;
if(i>5){
i=1;
}
}
//当鼠标放在图片上时,清除定时器
function stopScroll(){
clearInterval(timer);
}
//当鼠标离开图片时,重新调用定时器
function goon(){
timer=setInterval("changeImgSrc()",1000);
}
//当鼠标放在li上时,清除定时器
function stopScroll(id){
if(id){
i=id;
changeImgSrc();
}
clearInterval(timer);
}
</script>
</html>