原生JS实现一些简单的操作

最新推荐文章于 2022-11-24 09:54:53 发布

JESSE_JAVA

最新推荐文章于 2022-11-24 09:54:53 发布

阅读量338

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_36171533/article/details/79203833

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="./1.js" charset="utf-8"></script>
	<link rel="stylesheet" href="./css.css" type="text/css" />
	<title>Document</title>
</head>
<body>
<form id="myform" action="1.php" >
	用户名:<input type="text" id="username" name="username"><span id="userinfo">用户名必须为数字</span><br />
	密  码：<input type="text" id="password" name="password"><span id="passinfo">密码必须为数字</span><br />
	鼠标焦点事件：<input type="text" id="shubiao" value="鼠标在文本中和不在文本中状态不一样"><span id="shubiaoclick"></span><br />
	<input type="submit" value="提交" id="go">
	<input type="reset" value="重置" id="reset">
</form>
	<input type="submit" value="更改样式" id="tanchuang">
	<input type="submit" value="传统事件绑定" id="ct">
	<input type="submit" value="现代时间绑定" id="xd">
<select name="" id="book">
	<option value="0">少年壮志</option>
	<option value="1">三国演义</option>
	<option value="2">红楼梦</option>
	<option value="3">多表单测试</option>
</select>
<span id="info"></span>
	<div id="time"><script>setInterval(getTime,10);</script></div> 
<div id="box">测试单击</div>
<div id="box0">测试双击</div>
<div id="box1" style="top: 50px;left: 500px"><img src="./img/1.jpg" id="xiong"><p id="bear">上下左右</p></div>
<div id="box2"></div>

<button>创建一个表格</button><br>
ID：<input type="text" name="id"><br>
姓名：<input type="text" name="name"><br>
性别：<input type="text" name="sex"><br>
年龄：<input type="text" name="age"><br>
<button>创建一行表格</button>
<div id="top" style="cursor:pointer;border:1px solid #ccc">查看所有的电影</div>
<div id="menu" style="display:none;border:1px solid #ccc">
<ul>
	<li>变形金刚</li>
	<li>地雷战</li>
	<li>地道战</li>
	<li>奥特曼</li>
</ul>
</div>
</html>

JS部分：

window.οnlοad=function(){
	var bind=function(){
		var dels=document.getElementsByName("del");
		for(var i=0; i<dels.length;i++){
				dels[i].οnclick=function(){
					if(confirm("你真的要删除我吗？")){
					this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
				}
			}
		}
	}
	/* ----------鼠标焦点开始---------- */ 
	//一般用于输入框提示
	var shu=document.getElementById("shubiao");
	var useri=document.getElementById("shubiaoclick");
	shu.οnfοcus=function(){ //onfocus获取焦点
		useri.innerHTML="你看到我了吗？";
	}
	shu.οnblur=function(){ //onblur失去焦点
		useri.innerHTML="你没看到我了吗？";
	}

	var myform=document.getElementById("myform");
	reset.οnclick=function(){
		myform.onreset();
	}
	//表单重置
	myform.οnsubmit=function(){
		return false;
	}
	//表单拒接提交
	/* ----------鼠标焦点结束---------- */ 
	
	
	/* ----------按键焦点开始---------- */ 
	/*
	//这个方法是返回键盘按键
	//只要是键盘有敲击就会有反应
	window.οnkeydοwn=function(e){
		alert("你按键了，损塞，你按住的键是："+e.keyCode);
	}
	*/
	/* ----------按键焦点结束---------- */ 


	/* ----------图像移动开始---------- */ 
	var box1=document.getElementById("box1");
	var bear=document.getElementById("bear");
	var i=10;
	//37 左 38 上 39 右 40 下
	window.οnkeydοwn=function(e){
		//onkeydown接收按键，将当按键转换为数字代码
		if (e.keyCode==37) {
			box1.style.left=(parseInt(box1.style.left)-i)+"px";
			bear.innerHTML="<font color='green'>"+box1.style.left+"</font>";
			if((parseInt(box1.style.left)-i)==0){
				alert("到头了,宽度："+box1.style.left);
			}
		}else if(e.keyCode==38){
			bear.innerHTML="<font color='green'>"+box1.style.top+"</font>";
			box1.style.top=(parseInt(box1.style.top)-i)+"px";
			if((parseInt(box1.style.left)-i)==0){
				alert("到头了,宽度："+box1.style.left);
			}
		}else if(e.keyCode==39){
			bear.innerHTML="<font color='green'>"+box1.style.left+"</font>";
			box1.style.left=(parseInt(box1.style.left)+i)+"px";
			if((parseInt(box1.style.left)+i)==700){
				alert("到头了,宽度："+box1.style.left);
			}
		}else if(e.keyCode==40){
			bear.innerHTML="<font color='green'>"+box1.style.top+"</font>";
			box1.style.top=(parseInt(box1.style.top)+i)+"px";
			if((parseInt(box1.style.top)+i)==0){
				alert("到头了,宽度："+box1.style.top);
			}
		}
	}
	/* ----------图像移动结束---------- */ 
	
	
	/* ----------单击和双击---------- */ 
	 var box=document.getElementById("box");
		 box.οnclick=function(){
		 alert("点击了点击");
		}
	 var box0=document.getElementById("box0");
		box0.οndblclick=function(){
		  alert("点击了双击");
		}
		//必须是双击才有作用
	/* ----------单击和双击---------- */ 
	
	
	/* ----------select显示开始---------- */ 
	var select=document.getElementById("book");
	var info=document.getElementById("info");
	select.οnchange=function(){
		switch(parseInt(this.value)){
			case 0:
			info.innerHTML="这个故事真好"+this.value;
			break;
			case 1:
			info.innerHTML="我好幸福啊"+this.value;
			break;
			case 2:
			info.innerHTML="就是你"+this.value;
			break;
			case 3:
			info.innerHTML='<select><option value="0">四川</option><option value="1">湖北</option></select>';
			break;
		}
	}
	
	
	/* ----------select显示结束---------- */ 
	
	
	
	/* ----------表单验证开始---------- */ 
	var user=document.getElementById("username");
	var pass=document.getElementById("password");
	var useri=document.getElementById("userinfo");
	var passi=document.getElementById("passinfo");
	//触发失去焦点事件
	user.οnblur=function(){
		var userp=/^\w{6,12}$/;
		if(userp.test(this.value)){
			useri.innerHTML="<font color='green'>正确</font>";
		}else{
			useri.innerHTML="<font color='red'>错误</font>"
		}
	}
	pass.οnblur=function(){
	
		if(this.value.length>=6 && this.value.length<=15){
			passi.innerHTML="<font color='green'>正确</font>";
		}else{
			passi.innerHTML="<font color='red'>错误</font>"
		}
	}
	
	/**附录
	 * 正则匹配
	 * @type {RegExp}

	var pattern=/\d/g;
	document.write(pattern.exec(str)+"<hr/>");//null
	document.write(pattern.test(str)+"<hr/>");//false
	 */
	/* ----------表单验证结束---------- */ 
	
	
	
	
	/* ----------获取时间以及毫秒开始---------- */ 
	var box=document.getElementById("time");
	var getTime=function(){
	var date=new Date();
	
 	box.innerHTML=date+date.getMilliseconds();
 	}
 	setInterval(getTime,200)
	/* ----------获取时间以及毫秒结束---------- */ 


	
	/* ----------鼠标常用事件---------- */ 

	var box2=document.getElementById("box2");
	//鼠标点击
	box2.οnmοusedοwn=function(){
		this.style.background='green';
	}
	//鼠标移入
	box2.οnmοusemοve=function(){
		this.style.background='red';
	}
	//鼠标点击
	box2.οnmοuseup=function(){
		this.style.background='black';
	}
	//鼠标弹起来
	box2.οnmοuseup=function(){
		this.style.background='black';
	}

	/* ----------鼠标常用事件---------- */ 


	/* ----------js操作表单---------- */ 
	var id=document.getElementsByName("id")[0];
	var name=document.getElementsByName("name")[0];
	var sex=document.getElementsByName("sex")[0];
	var age=document.getElementsByName("age")[0];
	var insertTr=function(){
		var tr=document.createElement("tr");
		var td1=document.createElement("td");
		var td2=td1.cloneNode();
		var td3=td1.cloneNode();
		var td4=td1.cloneNode();
		var td5=td1.cloneNode();
		//clone是克隆，把td1的属性克隆下来
		td1.innerHTML=id.value;
		td2.innerHTML=name.value;
		td3.innerHTML=sex.value;
		td4.innerHTML=age.value;
		td5.innerHTML="<button name=\"del\">删除</button>";
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		var table=document.getElementsByTagName("table")[0];
		var i=parseInt(table.lastChild.lastChild.lastChild.innerHTML)+parseInt(age.value);
		table.lastChild.lastChild.lastChild.innerHTML=i;
		table.lastChild.previousSibling.appendChild(tr);
		bind();
		//insertBefore是插入数据


	}
	var cTable=function(){
		var table=document.createElement("table");
		table.width="700px";
		table.border="1";
		table.setAttribute("cellspacing","0");
		//创建一个caption
		var caption=document.createElement("caption");
		//创建一个文本节点
		var text1=document.createTextNode("员工信息表");
		//将文本节点cherub到caption当中
		caption.appendChild(text1);
		//将caption插入到表格当中
		table.appendChild(caption);
		//创建thead
		var thead=document.createElement("thead");
		//创建tr
		var tr1=document.createElement("tr");
		//创建第一行四个th
		var th1=document.createElement("th");
		var th2=document.createElement("th");
		var th3=document.createElement("th");
		var th4=document.createElement("th");
		var th5=document.createElement("th");
		//向四个th当中添加文本节点
		th1.innerHTML="ID";
		th2.innerHTML="姓名";
		th3.innerHTML="性别";
		th4.innerHTML="年龄";
		th5.innerHTML="属性";
		//将th插入到tr当中
		tr1.appendChild(th1);
		tr1.appendChild(th2);
		tr1.appendChild(th3);
		tr1.appendChild(th4);
		tr1.appendChild(th5);
		//将tr1插入到thead当中
		thead.appendChild(tr1);
		//再把thead插入到table当中
		table.appendChild(thead);
		//==========tbody==========//
		var tbody=document.createElement("tbody");

		//创建2个tr
		var tr1=document.createElement("tr");
		var tr2=document.createElement("tr");

		//每个tr中放4个td
		var td1=document.createElement("td");
		td1.innerHTML="1";
		var td2=document.createElement("td");
		td2.innerHTML="李白";
		var td3=document.createElement("td");
		td3.innerHTML="男";
		var td4=document.createElement("td");
		td4.innerHTML="3";
		var td5=document.createElement("td");
		td5.innerHTML="<button name=\"id\">删除</button>";
		tr1.appendChild(td1);
		tr1.appendChild(td2);
		tr1.appendChild(td3);
		tr1.appendChild(td4);
		tr1.appendChild(td5);
		//数据开始插入
		var td5=document.createElement("td");
		td5.innerHTML="2";
		var td6=document.createElement("td");
		td6.innerHTML="杜甫";
		var td7=document.createElement("td");
		td7.innerHTML="男";
		var td8=document.createElement("td");
		td8.innerHTML="4";
		var td9=document.createElement("td");
		td9.innerHTML="<button name=\"id\">删除</button>";
		tr2.appendChild(td5);
		tr2.appendChild(td6);
		tr2.appendChild(td7);
		tr2.appendChild(td8);
		tr2.appendChild(td9);
		
		//将数据插入到tbody中
		tbody.appendChild(tr1);
		tbody.appendChild(tr2);

		//将tbody插入到table中
		table.appendChild(tbody);

		//单个插入
		var tr3=document.createElement("tr");
		var td9=document.createElement("td");
		var td10=document.createElement("td");
		var td11=document.createElement("td");
		var td12=document.createElement("td");
		var td13=document.createElement("td");
		td9.innerHTML="3";
		td10.innerHTML="唐伯虎";
		td11.innerHTML="女";
		td12.innerHTML="1";
		td13.innerHTML="<button>删除</button>";
		tr3.appendChild(td9);
		tr3.appendChild(td10);
		tr3.appendChild(td11);
		tr3.appendChild(td12);
		tr3.appendChild(td13);
		tbody.appendChild(tr3);
		table.appendChild(tbody);
		bind();

		//创建tfoot
		var tfoot=document.createElement("tfoot");
		//创建一个tr
		var tr=document.createElement("tr");
		var td1=document.createElement("td");
		td1.setAttribute("colspan","4");
		td1.innerHTML="合计";
		var td2=document.createElement("td");
		i=parseInt(td4.innerHTML)+parseInt(td8.innerHTML)+parseInt(td12.innerHTML);
		
		td2.innerHTML=i;
		tr.appendChild(td1);
		tr.appendChild(td2);
		tfoot.appendChild(tr);
		table.appendChild(tfoot);
		// var i=parseInt(table.lastChild.lastChild.lastChild.innerHTML)+parseInt(age.value);
		// table.lastChild.lastChild.innerHTML=i;
		// alert((table.lastChild.lastChild.lastChild);
		// table.inserBefore(tr,table.lastChild);
		
		document.body.appendChild(table);


	}
	var btn1=document.getElementsByTagName("button")[0];
	var btn2=document.getElementsByTagName("button")[1];
	btn1.οnclick=cTable;
	btn2.οnclick=insertTr;
	/* ----------js操作表单结束---------- */

	/* ----------js操作css样式---------- */ 
		var span1=document.getElementById("top");
		var div1=document.getElementById("menu");
		span1.οnmοuseοver=function(){
			div1.style.display="block";//sqpan鼠标移入
		}
		span1.οnmοuseοut=function(){
			div1.style.display="none";//sqpan鼠标移出
		}
		div1.οnmοuseοver=function(){
			this.style.display="block";//div鼠标移入
		}
		div1.οnmοuseοut=function(){
			this.style.display="none";//div鼠标移出
		}
	/* ----------js操作css样式结束---------- */ 


	/* ----------js操作外部css样式结束---------- */ 
	var tanchuang=document.getElementById("tanchuang");
		tanchuang.οnclick=function(){
			if(i==1){
					var csseqs=document.getElementById("csseq1");
					//1,获取link标签对象
					var link=document.getElementsByTagName("link")[0];
					//2,获取link对象找style对象
					var style=link.sheet||link.styleSheet;
					//第二种方式
					var style=document.styleSheets[0];
					//3，通过style对象找到规则列表
					var rules=style.cssRules||style.rules;
					//4，通过规则找到可操作对象
					var style=rules[3].style;
					//5，改变样式
					style.width="100px";
					style.height="100px";
					i=2;
				}else{
					var csseqs=document.getElementById("csseq1");
					var link=document.getElementsByTagName("link")[0];
					var style=link.sheet||link.styleSheet;
					var style=document.styleSheets[0];
					var rules=style.cssRules||style.rules;
					var style=rules[3].style;
					style.width="200px";
					style.height="200px";
					i=1;
				}
		}
	/* ----------js操作外部css样式结束---------- */ 


	/* ----------传统JS事件绑定开始---------- */ 
	/*var ct=document.getElementById("ct");
	var saved=null;
	ct.οnclick=function(){
		alert("你看到我的小熊了吗");
	}
	saved=ct.onclick;
	ct.οnclick=function(){
		if(saved!=null){
			saved();
		}
		alert("你看到我的小兔了吗");
	}*/


	
	//轮循环执行
	
	var ct=document.getElementById("ct");
	var ct1=function(){
		alert("小兔子");
		this.οnclick=ct2;
	}
	var ct2=function(){
		alert("小熊");
		this.οnclick=ct1;
	}
	ct.οnclick=ct1;
	
	/* ----------传统JS事件绑定结束---------- */ 




}





/*表单验证结束
html部分
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="./1.js"></script>
	<title>Document</title>
</head>
<body>
<form action="">
用户名:<input type="text" id="username" name="username"><span id="userinfo">用户名必须为数字</span><br />
密  码：<input type="text" id="password" name="password"><span id="passinfo">密码必须为数字</span><br />
</form>
</body>
</html>


js部分

window.οnlοad=function(){
	var user=document.getElementById("username");
	var pass=document.getElementById("password");
	var useri=document.getElementById("userinfo");
	var passi=document.getElementById("passinfo");
	//触发失去焦点事件
	user.οnblur=function(){
		var userp=/^\w{6,12}$/;
		if(userp.test(this.value)){
			useri.innerHTML="<font color='green'>正确</font>";
		}else{
			useri.innerHTML="<font color='red'>错误</font>"
		}
	}
	pass.οnblur=function(){
	
		if(this.value.length>=6 && this.value.length<=15){
			passi.innerHTML="<font color='green'>正确</font>";
		}else{
			passi.innerHTML="<font color='red'>错误</font>"
		}
	}
}

表单验证结束*/

/**
 * 正则匹配
 * @type {RegExp}

var pattern=/\d/g;
document.write(pattern.exec(str)+"<hr/>");//null
document.write(pattern.test(str)+"<hr/>");//false
 */

/*
 字符串的查找，匹配，替换，分割
 var str='abc-bcd-ifg';
 document.write(str.search(/\d/)+"<hr/>");
 document.write(str.match(/-/g)+"<hr/>");
 document.write(str.replace(/-/g,'*')+"<hr/>");
 document.write(str.split(/-/g)+"<hr/>");


/*

//计时函数开始
window.οnlοad=function(){
	var box=document.getElementById("time");
	var getTime=function(){
	var date=new Date();
	
 	box.innerHTML=date+date.getMilliseconds();
 	}
 	setInterval(getTime,200)
 }

 */
/*dateObject.getMilliseconds()
//js中的构造类和方法
function Person($name,$age,$sex){
	this.name=$name;
	this.age=$age;
	this.sex=$sex;
	this.say=function(){
		document.write("<hr/>我是："+this.name+"<hr/>年龄："+this.age+"<hr/>性别："+this.sex);
	}
}
var p=new Person("libai",19,"nan");
p.say();
输出：我是：libai
年龄：19
性别：nan
 */

/*
//使用JSON声明的方法
//var 对象名称={属性1：属性的值，属性二：属性的值，方法名称：方法的声明}
var json={
	'name':"zhangsan",
	'age':20,
	say:function(){
		document.write(this.name+this.age);
	}
}
json.say();
输出zhangsan20
 */

/*
局部变量和全局变量
function myFunc(){
	var a=200;//局部变量
	b=100;//全局变量
	document.write(a+"<hr/>");
}

myFunc();
document.write(a);
document.write(b);//全局变量
输出200
 */

/*
js中的函数方法开始
var person=new Object();
person.name="zhangsan";
person.age=20;
person.sex="nan";
person.say=function(){
	document.write(this.name+this.age+this.sex);
	document.write("<hr/>我是："+this.name+"<hr/>年龄："+this.age+"<hr/>性别："+this.sex);
}
person.say();
输出：zhangsan20nan
我是：zhangsan
年龄：20
性别：nan
js中的函数方法结束
*/

CSS部分

#box,#box0{
	height: 20px;
	width: 140px;
	background: #ccc;
	margin-top:10px;
}

#box1{
	height: 40px;
	width: 40px;
	background: red;
	position: absolute;
	top: 20px;
	left: 20ppx;
}
#box2{
	margin-top:10px;
	height: 50px;
	width: 50px;
	background: #ccc;

}
#xiong{
	height: 80px;
	width: 80px;
	border: 1px solid red;
}

JESSE_JAVA

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现一些简单的操作

Html部分： Document 用户名:用户名必须为数字密码：密码必须为数字鼠标焦点事件：少年壮志三国演义红楼梦多表单测试 setInterval(getTime,10); 测试单击测试双击上下左右创建一个表格ID：姓名：性别：年龄：创建一行表格查看所有的电影变形金刚地
复制链接

扫一扫