常用 js 代码

来源：互联网发布：天猫魔盘连接不上网络编辑：程序博客网时间：2024/06/05 05:35

全选，全部选，反选

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oBtn1=document.getElementById('btn1');    var oBtn2=document.getElementById('btn2');    var oBtn3=document.getElementById('btn3');    var oDiv=document.getElementById('div1');    var aCh=oDiv.getElementsByTagName('input');    oBtn1.onclick=function ()    {        for(var i=0;i<aCh.length;i++)        {            aCh[i].checked=true;        }    };    oBtn2.onclick=function ()    {        for(var i=0;i<aCh.length;i++)        {            aCh[i].checked=false;        }    };    oBtn3.onclick=function ()    {        for(var i=0;i<aCh.length;i++)        {            if(aCh[i].checked==true)            {                aCh[i].checked=false;            }            else            {                aCh[i].checked=true;            }        }    };};</script></head><body><input id="btn1" type="button" value="全选" /><br><input id="btn2" type="button" value="不选" /><br><input id="btn3" type="button" value="反选" /><br><div id="div1">    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br>    <input type="checkbox" /><br></div></body></html>

选项卡

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 .active {background:yellow;}#div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}</style><script>window.onload=function (){    var oDiv=document.getElementById('div1');    var aBtn=oDiv.getElementsByTagName('input');    var aDiv=oDiv.getElementsByTagName('div');    for(var i=0;i<aBtn.length;i++)    {        aBtn[i].index=i;        aBtn[i].onclick=function ()        {            for(var i=0;i<aBtn.length;i++)            {                aBtn[i].className='';                aDiv[i].style.display='none';            }            this.className='active';            //alert(this.index);            aDiv[this.index].style.display='block';        };    }};</script></head><body><div id="div1">    <input class="active" type="button" value="教育" />    <input type="button" value="培训" />    <input type="button" value="招生" />    <input type="button" value="出国" />    <div style="display:block;">1111</div>    <div>2222</div>    <div>333</div>    <div>4444</div></div></body></html>

时钟，计时器

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>function toDou(n){    if(n<10)    {        return '0'+n;    }    else    {        return ''+n;    }}window.onload=function (){    var aImg=document.getElementsByTagName('img');    function tick(){        var oDate=new Date();        var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());        for(var i=0;i<aImg.length;i++)        {            aImg[i].src='img/'+str.charAt(i)+'.png';        }    }    setInterval(tick, 1000);    tick();};</script></head><body style="background:black; color: white; font-size:50px;"><img src="img/0.png" /><img src="img/0.png" />:<img src="img/0.png" /><img src="img/0.png" />:<img src="img/0.png" /><img src="img/0.png" /></body></html>

提示框移入移出

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>div {float:left; margin:10px;}#div1 {width:50px; height:50px; background:red;}#div2 {width:250px; height:180px; background:#CCC; display:none;}</style><script>window.onload=function (){    var oDiv1=document.getElementById('div1');    var oDiv2=document.getElementById('div2');    var timer=null;    oDiv2.onmouseover=oDiv1.onmouseover=function ()    {        clearTimeout(timer);        oDiv2.style.display='block';    };    oDiv2.onmouseout=oDiv1.onmouseout=function ()    {        timer=setTimeout(function (){            oDiv2.style.display='none';        }, 500);    };    // oDiv1.onmouseover=function ()    // {        // clearTimeout(timer);        // oDiv2.style.display='block';    // };    // oDiv1.onmouseout=function ()    // {        // timer=setTimeout(function (){            // oDiv2.style.display='none';        // }, 500);    // };    // oDiv2.onmouseover=function ()    // {        // clearTimeout(timer);    // };    // oDiv2.onmouseout=function ()    // {        // timer=setTimeout(function (){            // oDiv2.style.display='none';        // }, 500);    // };};</script></head><body><div id="div1"></div><div id="div2"></div></body></html>

无缝滚动

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#div1 ul {position:absolute; left:0; top:0;}#div1 ul li {float:left; width:178px; height:108px; list-style:none;}</style><script>window.onload=function (){    var oDiv=document.getElementById('div1');    var oUl=oDiv.getElementsByTagName('ul')[0];    var aLi=oUl.getElementsByTagName('li');    var speed=-2;    //oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;    oUl.innerHTML+=oUl.innerHTML;    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';    function move(){        if(oUl.offsetLeft<-oUl.offsetWidth/2)        {            oUl.style.left='0';        }        if(oUl.offsetLeft>0)        {            oUl.style.left=-oUl.offsetWidth/2+'px';        }        oUl.style.left=oUl.offsetLeft+speed+'px';    }    var timer=setInterval(move, 30);    oDiv.onmouseover=function ()    {        clearInterval(timer);    };    oDiv.onmouseout=function ()    {        timer=setInterval(move, 30);    };    document.getElementsByTagName('a')[0].onclick=function ()    {        speed=-2;    };    document.getElementsByTagName('a')[1].onclick=function ()    {        speed=2;    };};</script></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><div id="div1">    <ul>        <li><img src="img2/1.jpg" /></li>        <li><img src="img2/2.jpg" /></li>        <li><img src="img2/3.jpg" /></li>        <li><img src="img2/4.jpg" /></li>    </ul></div></body></html>

getByClass 通过 className 获取元素

function getByClass(oParent, sClass){    var aResult=[];    var aEle=oParent.getElementsByTagName('*');    for(var i=0;i<aEle.length;i++)    {        if(aEle[i].className==sClass)        {            aResult.push(aEle[i]);        }    }    return aResult;}

表格搜索

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oTab=document.getElementById('tab1');    var oTxt=document.getElementById('name');    var oBtn=document.getElementById('btn1');    oBtn.onclick=function ()    {        for(var i=0;i<oTab.tBodies[0].rows.length;i++)        {            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();            var sTxt=oTxt.value.toLowerCase();            var arr=sTxt.split(' ');            oTab.tBodies[0].rows[i].style.display='none';            for(var j=0;j<arr.length;j++)            {                if(sTab.search(arr[j])!=-1)                {                    oTab.tBodies[0].rows[i].style.display='block';                }            }        }    };};</script></head><body>姓名：<input id="name" type="text" /><input id="btn1" type="button" value="搜索" /><table id="tab1" border="1" width="500">    <thead>        <td>ID</td>        <td>姓名</td>        <td>年龄</td>        <td>操作</td>    </thead>    <tbody>        <tr>            <td>1</td>            <td>Blue</td>            <td>27</td>            <td></td>        </tr>        <tr>            <td>2</td>            <td>张三</td>            <td>23</td>            <td></td>        </tr>        <tr>            <td>3</td>            <td>李四</td>            <td>28</td>            <td></td>        </tr>        <tr>            <td>4</td>            <td>王五</td>            <td>25</td>            <td></td>        </tr>        <tr>            <td>5</td>            <td>张伟</td>            <td>24</td>            <td></td>        </tr>        <tr>            <td>6</td>            <td>王四</td>            <td>24</td>            <td></td>        </tr>    </tbody></table></body></html>

表格隔行变色

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oTab=document.getElementById('tab1');    var oldColor='';    for(var i=0;i<oTab.tBodies[0].rows.length;i++)    {        oTab.tBodies[0].rows[i].onmouseover=function ()        {            oldColor=this.style.background;            this.style.background='green';        };        oTab.tBodies[0].rows[i].onmouseout=function ()        {            this.style.background=oldColor;        };        if(i%2)        {            oTab.tBodies[0].rows[i].style.background='';        }        else        {            oTab.tBodies[0].rows[i].style.background='#CCC';        }    }};</script></head><body><table id="tab1" border="1" width="500">    <thead>        <td>ID</td>        <td>姓名</td>        <td>年龄</td>    </thead>    <tbody>        <tr>            <td>1</td>            <td>Blue</td>            <td>27</td>        </tr>        <tr>            <td>2</td>            <td>张三</td>            <td>23</td>        </tr>        <tr>            <td>3</td>            <td>李四</td>            <td>28</td>        </tr>        <tr>            <td>4</td>            <td>王五</td>            <td>25</td>        </tr>        <tr>            <td>5</td>            <td>张伟</td>            <td>24</td>        </tr>    </tbody></table></body></html>

排序

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#ul1 {background:green;}#ul2 {background:yellow;}</style><script>window.onload=function (){    var oUl1=document.getElementById('ul1');    var oBtn=document.getElementById('btn1');    oBtn.onclick=function ()    {        var aLi=oUl1.getElementsByTagName('li');        //aLi.sort();        var arr=[];        for(var i=0;i<aLi.length;i++)        {            arr[i]=aLi[i];        }        arr.sort(function (li1, li2){            var n1=parseInt(li1.innerHTML);            var n2=parseInt(li2.innerHTML);            return n1-n2;        });        //alert(arr[0].innerHTML);        for(var i=0;i<arr.length;i++)        {            alert('该把'+arr[i].innerHTML+'插入到最后');            oUl1.appendChild(arr[i]);        }    };};</script></head><body><input id="btn1" type="button" value="排序" /><ul id="ul1">    <li>34</li>    <li>25</li>    <li>9</li>    <li>88</li>    <li>54</li></ul></body></html>

阅读全文

0 0