常用 js 代码 - 1

于 2017-11-15 21:26:18 发布
阅读量279 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OneGoal/article/details/78545249
版权
本文提供了多种前端开发中常用的JavaScript代码实例，包括全选/取消选择/反选复选框、选项卡切换、数字时钟、提示框移入移出效果、无缝滚动轮播图、通过className获取元素、表格搜索及变色等功能。
摘要由CSDN通过智能技术生成

全选，全部选，反选


<!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>
OneGoal
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值