原生JS实现一些简单的操作
2018-01-30 11:30
666 查看
Html部分：
JS部分：
CSS部分
<!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.onload=function(){
var bind=function(){
var dels=document.getElementsByName("del");
for(var i=0; i<dels.length;i++){
dels[i].onclick=function(){
if(confirm("你真的要删除我吗？")){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
}
}
/* ----------鼠标焦点开始---------- */
//一般用于输入框提示
var shu=document.getElementById("shubiao");
var useri=document.getElementById("shubiaoclick");
shu.onfocus=function(){ //onfocus获取焦点
useri.innerHTML="你看到我了吗？";
}
shu.onblur=function(){ //onblur失去焦点
useri.innerHTML="你没看到我了吗？";
}
var myform=document.getElementById("myform");
reset.onclick=function(){
myform.onreset();
}
//表单重置
myform.onsubmit=function(){
return false;
}
//表单拒接提交
/* ----------鼠标焦点结束---------- */
/* ----------按键焦点开始---------- */
/*
//这个方法是返回键盘按键
//只要是键盘有敲击就会有反应
window.onkeydown=function(e){
alert("你按键了，损塞，你按住的键是："+e.keyCode);
}
*/
/* ----------按键焦点结束---------- */
/* ----------图像移动开始---------- */
var box1=document.getElementById("box1");
var bear=document.getElementById("bear");
var i=10;
//37 左 38 上 39 右 40 下
window.onkeydown=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.onclick=function(){
alert("点击了点击");
}
var box0=document.getElementById("box0");
box0.ondblclick=function(){
alert("点击了双击");
}
//必须是双击才有作用
/* ----------单击和双击---------- */
/* ----------select显示开始---------- */
var select=document.getElementById("book");
var info=document.getElementById("info");
select.onchange=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.onblur=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.onblur=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.onmousedown=function(){
this.style.background='green';
}
//鼠标移入
box2.onmousemove=function(){
this.style.background='red';
}
//鼠标点击
box2.onmouseup=function(){
this.style.background='black';
}
//鼠标弹起来
box2.onmouseup=function(){
this.style.background='black';
}
/* ----------鼠标常用事件---------- */
/* ----------js操作表单---------- */
var id=document.getElementsByName("id")[0];
var name=document.getElementsByName("name")[0];
var sex=document.getElem
4000
entsByName("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.onclick=cTable;
btn2.onclick=insertTr;
/* ----------js操作表单结束---------- */
/* ----------js操作css样式---------- */
var span1=document.getElementById("top");
var div1=document.getElementById("menu");
span1.onmouseover=function(){
div1.style.display="block";//sqpan鼠标移入
}
span1.onmouseout=function(){
div1.style.display="none";//sqpan鼠标移出
}
div1.onmouseover=function(){
this.style.display="block";//div鼠标移入
}
div1.onmouseout=function(){
this.style.display="none";//div鼠标移出
}
/* ----------js操作css样式结束---------- */
/* ----------js操作外部css样式结束---------- */
var tanchuang=document.getElementById("tanchuang");
tanchuang.onclick=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.onclick=function(){
alert("你看到我的小熊了吗");
}
saved=ct.onclick;
ct.onclick=function(){
if(saved!=null){
saved();
}
alert("你看到我的小兔了吗");
}*/
//轮循环执行
var ct=document.getElementById("ct");
var ct1=function(){
alert("小兔子");
this.onclick=ct2;
}
var ct2=function(){
alert("小熊");
this.onclick=ct1;
}
ct.onclick=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.onload=function(){
var user=document.getElementById("username");
var pass=document.getElementById("password");
var useri=document.getElementById("userinfo");
var passi=document.getElementById("passinfo");
//触发失去焦点事件
user.onblur=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.onblur=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.onload=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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js实现简单的链式操作
- 原生JS取代一些JQuery方法的简单实现
- 原生JS取代一些JQuery方法的简单实现
- 使用vue.js 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用
- 下面简单使用Jquery来操作iframe的一些记录，这个使用纯JS也可以实现。
- 原生js操作checkbox用document.getElementById实现
- 简单实现JS对dom操作封装
- 原生js与jQuery实现简单的tab切换特效对比
- Java中Calendar的一些简单操作 及 JS中获取当前时间前一天时间(js中时间Date操作)
- 原生js实现简单打字机效果
- 用原生JS实现一个简单的计时器demo
- php简单封装了一些常用JS操作
- 简单实现原生JS中的多重继承
- js操作数据库实现注册和登陆的简单实例
- JS实现简单的对dom操作封装
- 简单实现JS对dom操作封装
- 原生js操作checkbox用document.getElementById实现
- js使用DOM操作实现简单留言板的方法
- 原生js实现数字字母混合验证码的简单实例
- Java中Calendar的一些简单操作 及 JS中获取当前时间前一天时间(js中时间Date操作)