javaScript特效

2023-01-07 22:06:40

<!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>

01.history属性界面1

<!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>

history属性界面2

<!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>

02.location属性

<!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>

03.document

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>

04.open()

<!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>

05.定时函数

<!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="data:images/cat.jpg" name="cat">

</body>

</html>

06.访问节点

<!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>

07.节点的增删改

<!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>

08.新增输入框

<!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>

09.table对象

<!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>

10.table新增和删除行

<!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>

11.Stirng对象的使用

<!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>

12.Date的使用

<!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>

13.数组的使用

<!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>

14.数组的属性和方法

<!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+="&nbsp;&nbsp;*"

            }

            arr.push(str);

        }

     document.getElementById("text").innerHTML=(arr.join("<br/>"));

    }

    </script>

</head>

<body>

</body>

<div id="text" style="text-align: center;"></div>

</html>

15.打印等腰三角形

<!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>

16.style样式

<!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>

17.tabs选项卡

<!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>

18.使用jquery实现

<!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>

19.滚动距离

<!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="data:images/cat.jpg" height="200px" width="200px">

</div>

</body>

</html>

20.飘浮图片

上一篇：Linux CentOS 6.5中安装与配置Tomcat-8方法


下一篇：004-redis-命令-哈希操作，列表操作