首页 > 代码库 > javaScript特效
javaScript特效
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <h1>第一个界面</h1> <a href="js02history.html">当前页面</a> <a href="js03history.html">下一个页面</a> <a href="javascript:history.forward()">forward()前进一个界面</a> <a href="javascript:history.go(1)">go(1)前进一个界面</a></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <h1>第二个界面</h1> <a href="javascript:history.back()">back()后退一个界面</a> <a href="javascript:history.go(-1)">go(-1)后退一个界面</a></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> document.write("host值为："+location.host+"<br/>") document.write("hostname值为："+location.hostname+"<br/>") document.write("href值为："+location.href+"<br/>") document.write("hash值为："+location.hash+"<br/>") document.write("search值为："+location.search+"<br/>") </script></head><body> <input type="text"> <input type="button" value="刷新当前页面" onclick="location.reload()"> <input type="button" value="替换当前页面" onclick="location.replace(‘http://www.bdqn.cn‘)"></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{font-size:14px; line-height:30px; } input{margin:1px; width:90px; font-size:12px; padding:0; } #node{ width:100px; font-size:24px; font-weight:bold; float: left; } </style><script type="text/javascript"> /*改变层内容*/ function changeLink(){ document.getElementById("node").innerHTML="<h1>改变</h1>"; //document.getElementById("node").innerText="<h1>改变</h1>"; } /*获取所有input标签中所有的value*/function all_input(){ var allInput= document.getElementsByTagName("input"); /*声明变量 接收所有input标签中所有的value*/ var str=""; for(var i=0;i<allInput.length;i++){ str+=allInput[i].value+"<br/>"; } /*把str获取的值 给 p标签*/ document.getElementById("s").innerHTML=str;} /*获取所有name属性值是season的value*/function s_input(){ var season= document.getElementsByName("season"); /*声明变量 接收所有input标签中所有的value*/ var str=""; for(var i=0;i<season.length;i++){ str+=season[i].value+"<br/>"; } /*把str获取的值 给 p标签*/ document.getElementById("s").innerHTML=str;}</script></head><body><div id="node">新浪</div><input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br /><br /><input name="season" type="text" value="春" /><input name="season" type="text" value="夏" /><input name="season" type="text" value="秋" /><input name="season" type="text" value="冬" /><br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" /><input name="b3" type="button" value="显示season内容" onclick="s_input()" /><p id="s"></p></body></html>
document.referrer; /*返回载入当前文档的来源文档的URL*/
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>window中的open()</title><script type="text/javascript"> function openNew(){ window.open( "http://www.baidu.com", "百度页面", "height=400,width=400" ); }</script></head><body><input type="button" value="打开新的窗口" onclick="openNew()"></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>定时函数</title><script type="text/javascript"> var time=0; function count(){ //计数的方法 document.getElementById("context").innerHTML="时间："+(++time); } var interval,timeout; //定时函数 function setI(){ //setInterval函数 周期执行 interval=setInterval("count()",1000); } function setT(){ //setTimeout函数 执行一次 timeout= setTimeout("count()",1000); } //清除定时函数 function clearI(){//清除setInterval函数 clearInterval(interval); } function clearT(){//清除setTimeout函数 clearTimeout(timeout); }</script></head><body> <div id="context"></div><input type="button" value="setInterval函数" onclick="setI()"><input type="button" value="setTimeout函数" onclick="setT()"><br/> <input type="button" value="清除setInterval函数" onclick="clearI()"> <input type="button" value="清除setTimeout函数" onclick="clearT()"></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>访问节点</title><script type="text/javascript"> /* * nodeName: * 元素节点显示的是标签名称 * 属性节点显示的是属性名称 * 文本节点显示的是 #text * 文档节点显示的是#document * nodeValue; * 文本节点显示的是文本 * 属性节点显示的是属性值 * * nodeType: * 1 元素节点 * 2 属性节点 * 3 文本节点 * 8 注释 * 9 文档 * */ window.onload=function(){ var ul= document.getElementsByTagName("ul")[0]; /* alert("节点名称："+ul.nodeName); alert("节点类型："+ul.nodeType);*/ /*获取ul中的第一个li*/ var li=ul.firstElementChild; alert("节点名称："+li.nodeName); alert("节点类型："+li.nodeType); alert("节点内容："+li.childNodes[0].nodeValue); /*改变小猫咪图片的宽度*/ var image=document.getElementsByName("cat")[0]; image.setAttribute("width","200px"); //获取src的值 alert(image.getAttribute("src")); }</script></head><body> <ul> <li>小强1</li> <li>小强2</li> <li>小强3</li> </ul><img src="images/cat.jpg" name="cat"></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>访问节点</title><script type="text/javascript"> window.onload=function(){ var ul= document.getElementsByTagName("ul")[0]; /*新增节点*/ var newLi= document.createElement("li"); newLi.innerHTML="小黑"; ul.appendChild(newLi); /*获取ul第三个li*/ var second= ul.getElementsByTagName("li")[2]; ul.insertBefore(newLi,second); /*clone*/ var ul2= document.getElementsByTagName("ul")[0].cloneNode(true); document.getElementById("d").appendChild(ul2); /*删除节点*/ var reNode= ul.getElementsByTagName("li")[0]; // ul.removeChild(reNode); /*替换节点*/ ul.replaceChild(newLi,reNode); }</script></head><body> <ul> <li>小强1</li> <li>小强2</li> <li>小强3</li> </ul><div id="d"></div></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>新增输入框</title> <script type="text/javascript"> window.onload=function(){ var btn= document.getElementById("btn"); var ul= document.getElementById("u"); //点击事件 btn.onclick=function(){ var li= document.createElement("li");//创建li标签 var input= document.createElement("input"); //创建input标签 input.setAttribute("type","text"); input.setAttribute("placeholder","请输入内容"); li.appendChild(input); ul.appendChild(li); } } </script></head><body> <input type="button" value="新增" id="btn"><ul id="u"></ul></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>table对象</title> <script type="text/javascript"> window.onload=function(){ var table= document.getElementById("myTable"); var btn1= document.getElementById("btn1"); var btn2= document.getElementById("btn2"); //显示表格总行数 btn1.onclick= function () { alert(table.rows.length); } //显示第2行第2列的单元格内容rows是一个数组 cells也是一个数组 btn2.onclick= function () { alert(table.rows[1].cells[1].innerHTML); } } </script></head><body> <input type="button" value="显示表格总行数" id="btn1"> <input type="button" value="显示第2行第2列的单元格内容" id="btn2"><table id="myTable" border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr></table></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>新增和删除行</title> <script type="text/javascript"> window.onload=function(){ var table= document.getElementById("myTable"); var btn1= document.getElementById("btn1"); var btn2= document.getElementById("btn2"); //新增insertRow(index) btn1.onclick= function () { var row= table.insertRow(0); //给行新增列 并且给列赋值 row.insertCell(0).innerHTML="新增行的列1"; row.insertCell(1).innerHTML="新增行的列2"; row.insertCell(2).innerHTML="新增行的列3"; } //删除最后一行deleteRow(index) btn2.onclick= function () { table.deleteRow(table.rows.length-1); } } </script></head><body> <input type="button" value="新增" id="btn1"> <input type="button" value="删除最后一行" id="btn2"><table id="myTable" border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr></table></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>String对象的使用</title> <script type="text/javascript"> window.onload=function() { var url="http://www.bdqn.cn?name=admin"; //想要获取?之后的数据 并且把 admin 变成大写 var index= url.indexOf("?"); //alert(url.substring(index+1)); ？之后的数据 index= url.indexOf("="); alert(url.substring(index+1).toUpperCase()); } </script></head><body></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>当前时间</title> <script type="text/javascript"> window.onload=function() { function getTime(){ //获取当前系统时间 var date=new Date(); var hours=date.getHours(); var mins=date.getMinutes(); var secs=date.getSeconds(); document.getElementById("time").innerHTML=hours+":"+mins+":"+secs; } //定时函数 setInterval(getTime,1000); } </script></head><body> 当期系统时间：<div id="time"></div></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>数组的遍历</title> <script type="text/javascript"> //数组的声明 var arr=["aa","bb","cc"]; //3 var arr1=new Array(); //0 var arr2=new Array(20); //20 var arr3=new Array("aa","bb","cc"); //3 //遍历数组中的元素 for(var i=0;i<arr3.length;i++){ document.write(arr3[i]+"<br/>") } for(var x in arr3){ document.write(x+"====>"+arr3[x]+"<br/>") } </script></head><body></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>数组的属性和方法</title> <script type="text/javascript"> //数组的声明 var arr=["aa","cc","bb"]; //数组的长度 document.write("数组的长度是："+arr.length+"<br/>"); //向数组中添加一个新元素 push()新增之后会返回一个数组新的长度 document.write(arr.push("dd")+"<br/>") ; document.write(arr[3]+"<br/>"); //把数组使用字符 "-" 连接起来 join() document.write(arr.join("-")+"<br/>"); document.write(arr.sort()+"<br/>"); //字符abcd..... //创建一个新的数组 var arr2=[10,20,2,3,150,1,90]; //如果说是数字排序 我们需要加入一个比较函数 document.write(arr2.sort(function(a,b){ return a-b; // 如果想 降序 b-a })); </script></head><body></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>打印等腰三角形</title> <script type="text/javascript"> window.onload=function(){ var arr=[]; //声明一个空的数组 var str=""; for(var i=0;i<8;i++){ str="*"; for(var j=0;j<i;j++){ str+=" *" } arr.push(str); } document.getElementById("text").innerHTML=(arr.join("<br/>")); } </script></head><body></body><div id="text" style="text-align: center;"></div></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>style样式</title> <style type="text/css"> .title{ border:1px solid red; width: 200px; height:200px; background-color: yellowgreen } </style> <script type="text/javascript"> window.onload=function(){ var dom= document.getElementById("text"); /* alert(1); //改变 dom.style.backgroundColor="pink"; dom.style.marginLeft="200px"; dom.style.display="none";*/ dom.className="title"; } </script></head><body></body><div id="text" style="border: 1px solid red"></div></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Tab切换</title> <style type="text/css"> #tab{ width: 400px;} #tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;} #tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;} #tab ul li.cur{background-color: red} #tab .content{width:100%;border:1px solid #eeeeee;height: 100px;} </style> <script type="text/javascript"> window.onload = function() { //获取li var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ //循环的是tab框 lis[i].index=i; lis[i].onmousemove=function(){ for(var j=0;j<lis.length;j++){ //循环的是div的内容 document.getElementById("content-"+j).style.display="none"; lis[j].className=""; } lis[this.index].className="cur"; document.getElementById("content-"+this.index).style.display="block"; } } } </script></head><body><div id="tab"> <ul> <li class="cur">tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> </ul> <div id="c-box"> <div class="content" id="content-0"> tab-1第一个容器的内容 </div> <div class="content" id="content-1" style="display: none;"> tab-2第二个容器的内容 </div> <div class="content" id="content-2" style="display: none;"> tab-3第3个容器的内容 </div> <div class="content" id="content-3" style="display: none;"> tab-4第4个容器的内容 </div> </div></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Tab切换</title> <!--先引入样式文件--> <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <!--引入jquery需要的脚本库--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery.ui.tabs.js"></script> <script type="text/javascript"> $(function(){ $("#myTabs").tabs({ active:1, //默认选中的tab event:"mouseover" //触发的事件 }) }) </script></head><body><div id="myTabs"> <ul> <li><a href="#a">第1个</a></li> <li><a href="#b">第2个</a></li> <li><a href="#c">第3个</a></li> <li><a href="#d">第4个</a></li> </ul> <div id="a">第1个选项卡对应的</div> <div id="b">第2个选项卡对应的</div> <div id="c">第3个选项卡对应的</div> <div id="d">第4个选项卡对应的</div></div></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>滚动距离</title> <style type="text/css"> *{margin:0;padding: 0;} #box1{height:200px;width: 200px;background:#eee;border:1px solid #000;overflow-y:scroll;} p{line-height:40px;} </style> <script type="text/javascript"> window.onload = function () { var text=document.getElementById("text"); var box1=document.getElementById("box1"); box1.onscroll=function(){ text.innerHTML="距离Top多少像素："+box1.scrollTop; } } </script></head><body><div id="box1"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p></div><div id="text"></div></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>滚动距离</title> <style type="text/css"> *{margin:0;padding: 0;} #box{ position: absolute; top: 0px; left: 0px; } </style> <script type="text/javascript"> window.onload = function () { var box=document.getElementById("box"); var time=null,x= 1,y= 1,speed=5; function go(){ //水平方向 if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){ x=-1; } if(box.offsetLeft<0){ x=1; } box.style.left=box.offsetLeft+x*speed+"px"; //垂直方向 if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){ y=-1; } if(box.offsetTop<0){ y=1; } box.style.top=box.offsetTop+x*speed+"px"; } //定时函数 time=setInterval(go,100); //鼠标移上去 停止 box.onmousemove=function(){ if(time!=null){ clearInterval(time); } } //鼠标离开 继续移动 box.onmouseout=function(){ time=setInterval(go,100); } } </script></head><body><div id="box"> <img src="images/cat.jpg" height="200px" width="200px"></div></body></html>
javaScript特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。