自己学js代码常用（一）

J_csdn_WEB

已于 2024-05-28 21:42:26 修改

阅读量1.4k

点赞数 2

分类专栏：前端自己学习知识点文章标签： javascript 开发语言 ecmascript

于 2018-08-17 19:47:24 首次发布

本文链接：https://blog.csdn.net/j_csdn19/article/details/81779443

版权

自己学习知识点同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

图片轮播

<!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>
<style>
	.show{
		display:block;
	}
	.hide{
		display:none;
	}
</style>
<script>
    //记录定时器id
	var id;

    //开启轮播方法
	function start(){
        stop();//先 清空之前的

        //记录轮播位置
		var index=0;

        //查询ul列表--上面只有一个所以 取[0]（具体应该使用getElementById去找）
		var ulNode=document.getElementsByTagName("ul")[0];
		var lis=ulNode.getElementsByTagName("li");
		id=window.setInterval(function(){
			index++;
				for(var i in lis){
					lis[i].className="hide";
				}
				var n= index%lis.length;
				lis[n].className="show";
		},1000);
	}

    //停止方法
	function stop(){
		window.clearInterval(id);
	}
</script>
</head>

<body onload="start()" >
<ul onmouseover="stop()" onmouseout="start()" >
	<li class="show"><img src="a/1.jpg" width="320px"  height="430px"/></li>
    <li class="hide"><img src="a/2.jpg" width="320px"  height="430px" /></li>
    <li class="hide"><img src="a/3.jpg" width="320px"  height="430px" /></li>
    <li class="hide"><img src="a/4.jpg" width="320px"  height="430px"/></li>
    <li class="hide"><img src="a/5.jpg" width="320px"  height="430px" /></li>
</ul>
</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>
<script>
    var id;
	window.onload=function(){
		//1.获取span节点对象   spanNode
		var spanNode=document.getElementById("myid");
		//2.获取spanNode中封装的数据  
		var t=spanNode.innerHTML;
		//3.设置计时器
		window.setInterval(function(){
			  //3.1获取t的值
			    t=spanNode.innerHTML
			 // 3.2判断t的值
			  if(t>0){
			     t=t-1;
				 spanNode.innerHTML=t;
			  }
			else{
				// 跳转
			    }
			},1000);

		
		//计时5秒，跳转到网易，本次例题，只计时一次
		id=window.setTimeout("window.open('http://www.163.com')",5000);
		
	}
	function cleartime(){
		//1.关闭计时器
		window.clearTimeout(id);
		//2.跳转到网易
		window.open("http://www.163.com");
	}
</script>
</head>

<body>
对不起，程序出错了，<span id="myid">5</span>秒钟后跳转到网易，点击<a href="javascript:cleartime()">这里</a>直接到网易
</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>
<!--界面中文本框有三种样式，分别为正常、获取焦点、错误提示-->
<style>
table{
	border:#06F 1px solid;
	width:600px;
	border-collapse:collapse;}
table td,table th{
	border:#06F 1px solid;
	padding:10px;}
table td{
	background-color:#FF6;}
table th{background-color:#F96;}

.yes{
	display:none;
}
.no{
	display:inline;
	color:red;
}
.nor{
	border:#666 2px solid;
}
.error{
	border:#F00 2px solid;
}
.focus{
	border:#06F 2px solid;}
}
	
</style>
<script>
     //页面一加载让所有的文本框处于nor状态，当文本框获取焦点时该文本框处于focus样式
	 window.onload=function(){
		 //文本框处于nor
		 //1.获取表单对象：document.getElementsByTagName("form")[0]
		 var formNode=document.forms[0]//.forms获取document下所有的表单对象
		 input(formNode.user);
		 input(formNode.psw);
		 input(formNode.repsw);
		 input(formNode.email);
		 /*formNode.user.className="nor";
		 formNode.psw.className="nor";
		 //2.每个文本框都有获取焦点状态
		 formNode.user.onfocus=function(){
			 this.className="focus";
		 }*/
		 
	 }
	 function input(textNode){
		 textNode.className="nor";
		 textNode.onfocus=function(){
			 this.className="focus";
		 }
	 }
    //用户录入数据校验需要的参数有1.文本框节点对象，2.正则表达式 3.错误提示span节点对象
	function check(textNode,rel,spanNode){
		var textvalue=textNode.value;
		if(textvalue.match(rel)){
			spanNode.className="yes";
			textNode.className="nor";
			return true;
		}
		else{
			spanNode.className="no";
			textNode.className="error";
			return false;
		}
		
	}
    //表单验证：重要的功能是用户录入的数据不符合要求则不能提交到服务器
	//表单中submit命令按钮的提交功能对应一个表单的onsubmit事件
	//定义校验用户姓名函数
	function checkName(textNode){
		//1.获取用户姓名文本框中录入的数据, 事件源：event.srcElement
		//var textvalue=textNode.value;
		//alert(textvalue);
		//实参this指的是当前事件源，即调用该函数的节点对象，本函数中this指的是用户姓名节点对象
		//var textNode=event.srcElement;--->this
		// var textNode=document.getElementsByTagName("input")[0];
		//2.定义一个正则表达式（说明用户姓名录入数据的规则）要求由6位字母构成{n}
		var rel=/^[a-z]{6}$/i;//正则表达式必须用//封装，其内为正则的规则,i为忽略大小写\w字母数字下划线任意字符
		//由6位的字母数字下划线构成 
		//3.比较用户录入的数据是否满足条件 match() true匹配 false不匹配
		//获取错误提示span节点对象
		var spanNode=document.getElementById("nameid");
		return check(textNode,rel,spanNode);
		/*if(textvalue.match(rel)){
			spanNode.className="yes";
			return true;
		}
		else{
			spanNode.className="no";
			return false;
		}*/
		
		    //3.1不符合要求：span节点的className="no";
			//3.2符合要求：span节点的className="yes";
	}
	function checkPsw(textNode){
		var rel=/^\d{6,8}$/;
		var spanNode=document.getElementById("pswid");
		return check(textNode,rel,spanNode);
		
	}
	function checkEmail(textNode){
		var rel=/^\w+@\w+\.\w+$/;
		var spanNode=document.getElementById("emailid");
		return check(textNode,rel,spanNode);
	}
	function checkRepsw(textNode){
		var revalue = textNode.value;
		var a=document.getElementById("password").value;
		var b=document.getElementById("repswid");
		if(revalue==a){
		b.className="yes";
		textNode.className="nor";
		return true;
		
		}else{
		b.className="no";
		textNode.className="error";
		return false;
		}
	}
	//定义表单验证函数
	function checkform(form){
		//form为当前要验证的表单
		if(checkName(form.user)&&checkPsw(form.psw)&&checkEmail(form.email)&&checkRepsw(form.repsw))
		{
			//调用验证函数checkName(姓名文本框节点对象)等都需要传递一个参数，表示当前要验证的文本框的节点对象
			//表单如何获取其中的组件：表单对象名.组件name名
			return true;//允许提交，所有的验证函数都为true
		}
		else{
			return false;//禁止提交
		}
	}
</script>
</head>

<body>
<form onsubmit="return checkform(this)">
<table>
<tr>
<th colspan="2">用户注册表单</th>
</tr>
<tr>
<td>用户姓名：</td><td><input type="text"  name="user" onblur="checkName(this)" /><span class="yes" id="nameid">用户姓名格式错误，请重新输入！</span></td>
</tr>
<tr>
<td>输入密码：</td><td><input type="text"  name="psw"  id="password" onblur="checkPsw(this)"/><span class="yes" id="pswid">密码格式错误，请重新输入！</span></td>
</tr>
<tr>
<td>确认密码：</td><td><input type="text"  name="repsw"  onblur="checkRepsw(this)"/><span class="yes" id="repswid">两次密码不一致，请重新输入！</span></td>
</tr>
<tr>
<td>邮箱地址：</td><td><input type="text"  name="email" onblur="checkEmail(this)"  /><span class="yes" id="emailid">邮箱格式错误，请重新输入！</span></td>
</tr>
<tr>
<th colspan="2"><input  type="submit"  value="提交"/>
                <input type="reset"  value="重置"/></th>
</tr>
</table>
</form>
</body>
</html>