JavaScript综述

来源：互联网发布：拉尼娅王后知乎编辑：程序博客网时间：2024/06/05 16:35

一、js有两种写法：

（1、）写在<script></script>标签中

（2、）写在外部文件中，通过<script type="text/javascript" src=" "></script>引用；

js除了函数和对象，其他的都是和htm、cssl脚本一起按顺序解析，所以一定要注意js代码的位置，只能使用该位置前面定义的元素而不能使用后面的；当然，函数和对象由于调用时才会执行，所以位置无所谓。

说明：js如遇字符串嵌套，应遵循“内双外单”原则。

二、js获取元素有很多种方法，常用的有三种方法：

（1、）document.getElementById() 获取元素唯一；

（2、）document.getElementsByClassName() 获取的为一个数组；

（3、） document.getElementsByTagName() 获取的为一个数组。

例1、连续变色，由绿-->红-->黄-->绿-->红。。。，每一秒钟变色一次，由此得setIntseval( changecolor，1000)；这个changecolor应该要实现变一次色：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.main{width: 100px;height: 100px;margin: auto;background-color: white;}</style></head><body><div class="main" id="main"></div><script type="text/javascript" >    var i=0;            function change(){            var colors=["green","red","yellow"];var main=document.getElementById("main");if(i==2){i=0;}else{i++;}    main.style.backgroundColor=colors[i];           }           setInterval(change,1000);</script></body></html>

例2、连续变大小，由15px依次变大再重复，每一秒钟变一次，由此得setIntseval( changesize，1000)；这个changesize应该要实现变一次大小：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style>.main{font-size: 15px;}</style><body><p id="main" class="main">*</p><script>var main=document.getElementById("main");var i=15;function fun(){if(i==50){i=15;  }else{i+=5;  }   main.style.fontSize=i+"px";}setInterval(fun,1000);</script></body></html>

例3、星星变化：即大小和颜色一块变

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.div1{float: left;}.div2{float: left;}.div3{float: left;}</style></head><!-- xx1由小变大，由红变紫；xx2由大变小，由紫变红--><body><div class="div1">    <div class=""><p class="xx1">*</p></div>    <div class=""><p class="xx2">*</p></div>    <div class=""><p class="xx1">*</p></div>    <div class=""><p class="xx2">*</p></div></div><div class="div2">    <div class=""><p class="xx2">*</p></div>    <div class=""><p class="xx1">*</p></div>    <div class=""><p class="xx1">*</p></div>    <div class=""><p class="xx2">*</p></div></div><div class="div3">    <div class=""><p class="xx1">*</p></div>    <div class=""><p class="xx2">*</p></div>    <div class=""><p class="xx2">*</p></div>    <div class=""><p class="xx1">*</p></div></div></body><script>var xx1=document.getElementsByClassName("xx1");//xx1var xx2=document.getElementsByClassName("xx2");//xx2var colors=["red","orangered","yellow","green","greenyellow","blue","purple"];var size1=15;//xx1初始大小var size2=50;//xx2初始大小var i=0;//xx1由红开始var j=colors.length-1;//xx2由紫开始function changesize(){if(size1==50){size1=15;}else{size1+=5;}for(var x=0;x<xx1.length;x++){xx1[x].style.fontSize=size1+"px";//由小变大}if(size2==15){size2=50;}else{size2-=5;}for(var x=0;x<xx1.length;x++){xx2[x].style.fontSize=size2+"px";//由大变小}}function changecolor(){if(i==colors.length-1){i==0;}else{i++;}for(var x=0;x<xx1.length;x++){xx1[x].style.color=colors[i];//由红变紫}if(j==0){j=colors.length-1;}else{j--;}for(var x=0;x<xx1.length;x++){xx2[x].style.color=colors[j];//由紫变红}}setInterval(changesize,500);setInterval(changecolor,500);</script></html>

效果：

例4、下雨，雨的颜色不同，速度不同，大小不同：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.div1{float: left;margin-left: 50px;}.rain1{width: 2px;height: 40px;background-color: green;position: relative;}.rain2{width: 2px;height: 30px;background-color: blue;position: relative;}</style></head><body><div class="div1"><div class="rain1"></div><div class="rain1"></div><div class="rain2"></div><div class="rain1"></div><div class="rain1"></div><div class="rain2"></div></div><div class="div1"><div class="rain2"></div><div class="rain2"></div><div class="rain1"></div><div class="rain2"></div><div class="rain1"></div><div class="rain2"></div></div><script>function rain1(){var rain1=document.getElementsByClassName("rain1");    for(var i=0;i<rain1.length;i++){    //rain1[i].style.top = Math.min(1050, rain1[i].offsetTop + 5) + "px";        var top=rain1[i].style.top;        var top=parseInt(top);//top本身是带单位的        if(top>=300){        top=0;        }else{        top=rain1[i].offsetTop+5;        }        rain1[i].style.top =top+"px";     }}function rain2(){var rain2=document.getElementsByClassName("rain2");    for(var i=0;i<rain2.length;i++){    var top=rain2[i].style.top;        var top=parseInt(top);//top本身是带单位的        if(top>=200){        top=0;        }else{        top=rain2[i].offsetTop+5;        }        rain2[i].style.top =top+"px";  }}setInterval(rain1,400);setInterval(rain2,600);</script></body></html>

效果：

例5、一个简单的用户注册表单：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function check1(){var cusername=document.getElementById("cusername");var username=document.getElementById("username").value;if(username.length<4 || username.length>6){alert("4到6位之间");cusername.innerHTML="用户名不正确";return false;  }else{  cusername.innerHTML="用户名正确";return true;  }}function check2(){var cpwd=document.getElementById("cpwd");var pwd=document.getElementById("pwd").value;//alert(pwd);if(isNaN(pwd)==true){alert("只能是数字");cpwd.innerHTML="密码不正确";return false;  }else{  cpwd.innerHTML="密码正确";return true;  }}function check3(){var cpwd=document.getElementById("cpwd");var pwd=document.getElementById("pwd").value;var rpwd=document.getElementById("rpwd").value;if(pwd!=rpwd){alert("不相等")    crpwd.innerHTML="确认密码不正确";return false;  }else{  crpwd.innerHTML="确认密码正确";return true;  }}function check4(){var cpnum=document.getElementById("cpnum");var pnum=document.getElementById("pnum").value;if(isNaN(pnum)==true){alert("只能是数字");    cpnum.innerHTML="手机号码不正确";return false;  }else{  cpnum.innerHTML="手机号码正确";return true;  }}function check(){var a=check1();var b=check2();var c=check3();var d=check4();if(a&&b&&c&&d){return true;}else{return false;}}</script></head><body><center><h2>用户注册</h2><form action="index.html"  onsubmit="return check()">用户名：<input type="text" onchange="check1()" id="username"/><p id="cusername"></p><br>密码:<input type="password" onchange="check2()" id="pwd"/><p id="cpwd"></p><br>确认密码：<input type="password" onchange="check3()" id="rpwd"/><p id="crpwd"></p><br>手机号：<input type="text" onchange="check4()" id="pnum"/><p id="cpnum"></p><br><input type="submit" value="提交" /></form></center></body></html>

阅读全文

0 0