JavaScript入门学习笔记6—— JavaScript案例_html展示新的或未读的信息条目-CSDN博客

本文链接：https://blog.csdn.net/weixin_41619791/article/details/88858662

JavaScript入门学习笔记6—— JavaScript案例

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>