6个DOM实例—移入移出特效、循环点击换色、点击换行号、点击标题切换内容、多选反选和不选、选水果

于 2020-08-11 20:01:32 发布
阅读量220 收藏
点赞数
分类专栏： JavaScript 文章标签： js checkbox javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47982238/article/details/107939099
版权

一、移入移出特效


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <h1>000000000000001</h1>
    <h1>000000000000002</h1>
    <h1>000000000000003</h1>
    <h1>000000000000004</h1>
    <h1>000000000000005</h1>
</body>
<script>
    objs=document.getElementsByTagName('h1');
    for(i=0;i<objs.length;i++){
        objs[i].onmouseenter=function(){
            this.style.background='#ccc';
        }//鼠标移入时背景颜色为灰色
        objs[i].onmouseleave=function(){
            this.style.background='#fff';
        }//鼠标移出时背景颜色为白色
    }
//事件函数只有在事件触发时才会解析赋值
</script>
</html>

二、循环单击换色特效

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <h1>000000000000001</h1>
    <h1>000000000000002</h1>
    <h1>000000000000003</h1>
    <h1>000000000000004</h1>
    <h1>000000000000005</h1>
</body>
<script>
    objs=document.getElementsByTagName('h1');
    for(i=0;i<objs.length;i++){
        objs[i].setAttribute('num',0);

        objs[i].onclick=function(){
            num=parseInt(this.getAttribute('num'));
            this.setAttribute('num',parseInt(num)+1);
            if(num%2==0){
                this.style.background='#ccc';
            }else{
                this.style.background='#fff';
            }
            this.setAttribute('num',num+1);
    }
}
</script>
</html>

三、点击显示行号

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <h1>000000000000001</h1>
    <h1>000000000000002</h1>
    <h1>000000000000003</h1>
    <h1>000000000000004</h1>
    <h1>000000000000005</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<=objs.length;i++){
    objs[i].setAttribute('num',i+1);

    objs[i].onclick=function(){
        this.innerHTML=this.getAttribute('num');
    }
}
</script>
</html>

四、点击标题切换内容

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <h1>多啦A梦</h1>
    <img src="a.jpg" />
    <h1>狗</h1>
    <img src="dog.png"  />
    <h1>篮球</h1>
    <img src="bk.png"   />
</body>
<script>
objs=document.getElementsByTagName('h1');
iobjs=document.getElementsByTagName('img');
for(i=0;i<objs.length;i++){
    objs[i].setAttribute('line', i);
    objs[i].setAttribute('num', 0);
    iobjs[i].id=i;

    objs[i].onclick=function(){
        num=parseInt(this.getAttribute('num'));
        line=this.getAttribute('line');;
        nimg=document.getElementById(line);
        if(num%2==0){
            //隐藏h1下面的img标签
            nimg.style.display='none';
        }else{
            //显示h1下面的img标签
            nimg.style.display='block';
        }
        this.setAttribute('num', num+1);
    }
}
</script>
</html>

可以自己选几张照片，代码里的图片我就不放上来了，太麻烦。

五、多选、反选和全不选

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="">
        <p>爱好：</p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />打篮球
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />踢足球
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />游泳
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />唱歌
            </label>
        </p>
    </form>
    <p>
        <button id="qx">全选</button>
        <button id="qbx">全不选</button>
        <button id="fx">反选</button>
    </p>
</body>
<script>
qx=document.getElementById('qx');
qbx=document.getElementById('qbx');
fx=document.getElementById('fx');
objs=document.getElementsByTagName('input');

qx.onclick=function(){
    for(i=0;i<objs.length;i++){
        objs[i].checked=true;
    }
}
qbx.onclick=function(){
    for(i=0;i<objs.length;i++){
        objs[i].checked=false;
    }
}
fx.onclick=function(){
    for(i=0;i<objs.length;i++){
        objs[i].checked=objs[i].checked?false:true;
        //三元运算符：若该内容选中，则不选中；若内容未选中，则选中
    }
}
</script>
</html>

六、选水果

在左侧选择栏中选中的内容会被储存到右侧的候选框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }

        select{
            width:100px;
            height:150px;
        }
    </style>
</head>
<body>
    <h1>水果选择:</h1>
    <form action="javascript:">
        <select name="" id="s1" size='2'>
            <option value="">西瓜</option>
            <option value="">冬瓜</option>
            <option value="">苹果</option>
            <option value="">南瓜</option>
        </select>

        <input type="button" value=">>" id='btn'>

        <select name="" id="s2" size='2'>
        </select>
    </form>
</body>
<script>
btn=document.getElementById('btn');
s1=document.getElementById('s1');
s2=document.getElementById('s2');
opts=s1.options;

btn.onclick=function(){
    idx=s1.selectedIndex;
    s2.add(opts[idx]);
}
</script>
</html>

 

 

Bravo！！！
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值