javascriptDOM功能

最新推荐文章于 2024-07-16 19:32:16 发布

SKX311

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量385

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46031177/article/details/103975123

版权

1、验证码案例

var str="123456789zxcvbnmasdfghjklqwertyuiop"
 var str1=""
 for(var a=1;a<=4;a++){
     var b=Math.floor(Math.random()*str.length);
     str1+=str[b];
 }
 
 var box1=document.getElementById("box");
 var in2=document.getElementById("in1");
 box1.innerHTML=str1;
 function fn(){
    if(in2.value==box1.innerHTML){
     alert("验证成功");
 }else{
     alert("验证失败")
 }
 }

2、点名效果

var t=null;
    function fn1(){
    clearInterval(t)
    t=setInterval(function(){
    var box1=document.getElementById("box")
    var arr=["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "司马懿"]
    var num=Math.floor(Math.random()*arr.length)
    box1.innerHTML=arr[num]
    },1000)
    }
    
    
    function fn2(){
        clearInterval(t)
    }

3、排他思想

<body>
    <input type="button" value="未点">
    <input type="button" value="未点">
    <input type="button" value="未点">
    <input type="button" value="未点">
    <input type="button" value="未点">
    <input type="button" value="未点">
    <input type="button" value="未点">
</body>
<script>
var box1=document.getElementsByTagName("input");
for(var i=0;i<box1.length;i++){
    box1[i].onclick=function(){
        for(var j=0;j<box1.length;j++){
            box1[j].style.background="";
            box1[j].style.color="";
            box1[j].style.fontSize="";
            box1[j].value="未点";
        }
        this.style.background="red";
        this.value="已点"
        this.style.color="#fff";
        this.style.fontSize="20px"
    }
}

</script>

4、随机图片

<body>
    <input type="button" value="开始" onclick="kais()"><br>
    <img src="" alt="" id="img">
</body>
<script>
    var img1=document.getElementById("img");
var img2=["../图片/1.jpg","../图片/2.png","../图片/3.jpg","../图片/4.jpg","../图片/5.jpg","../图片/6.jpg","../图片/7.jpg","../图片/8.jpg","../图片/9.jpg","../图片/10.jpg"]
var num = 0;
function kais(){
    img1.src=img2[num++];
    if(num==4){
        num=0
    }
}
</script>

5、性别

var nan1 = document.getElementById("nan")
var nv1 = document.getElementById("nv")

td3.innerHTML = nannv()

 function nannv() {
        if (nan1.checked == true) {
            return "男"
        }
        if (nv1.checked == true) {
            return "女"
        }
    }

6、清除全选

 var tb=document.getElementById("tbd")
 var tr3=tb.getElementsByTagName("tr")

function qk(){
    for(var i=tr3.length-1;i>=0;i--){
        tr3[i].remove()
    }
    
 当i>=1时，会保留第一行，当i=length-2是会保留最后一行

7、楼层

倒序

<span class="a7">2楼</span>

var louce=document.getElementsByClassName("a7")

function louc(){
    for(var a=0;a<louce.length;a++){
        louce[a].innerHTML=louce.length-a+"楼"
    }
}


正序
<span class="a7">2楼</span>

var louce=document.getElementsByClassName("a7")

function louc(){
    for(var a=0;a<louce.length;a++){
        louce[a].innerHTML=a+1+"楼"
    }
}


表格楼层：

倒序：
var hang = document.getElementsByTagName("tr")

function louc() {
        for (var i = 1; i < hang.length; i++) {
            hang[i].children[3].innerHTML = hang.length-i+ "楼"
        }
    }
    
 正序：
   function louc(){
         for(var a=0;a<louceng1.length;a++){
            louceng1[a].innerHTML=a+1
         }
     }

8、删除选中

循环被选中的checkbox

function xz(){
	for(var i=xqx1.length-1;i>=0;i--){
		if(xqx1[i].checked==true){				xqx1[i].parentNode.parentNode.parentNode.remove()
		}
	}
}

9、在头部添加

uli.inserBefore(li1.ul1.firstChild)

10、加

<input type="button" value="+" onclick="jia(this)">

function jia(a){
    var n=a.previousElementSibling.value;
    n++;
    a.previousElementSibling.value=n;
    }

11、减

<input type="button" value="-"onclick="jian(this)">

function jian (b){
    var n=b.nextElementSibling.value;
    n--;
    b.nextElementSibling.value=n
    
    if(n<=0){
        n=0
        
  		 }
    }

12、小计

var span11 = document.getElementsByClassName("span1")//单价

    var span22 = document.getElementsByClassName("span2")//小计
    
    var inpt1 = document.getElementsByClassName("inp2")//个数
    
    function xiaoji() {
        for (var a = 0; a < span22.length; a++) {
            span22[a].innerHTML = parseFloat(span11[a].innerHTML) * parseFloat(inpt1[a].value)
        }
    }

13、总价

总价：￥<span id="zongjia">0</span>

var zj1=document.getElementById("zongjia");

function zj(){
        var sum=0;
        for(var a=0;a<span22.length;a++){
            sum+=parseFloat(span22[a].innerHTML)
        }
        zj1.innerHTML=sum
    }

14、几条留言

<h3 id="yt">共1条留言</h3>

var yt1=document.getElementById("yt")
var lii=document.getElementsByTagName("li")

function liuyan(){
    yt1.innerHTML="共"+lii.length+"条留言"
}

15、几件商品

<span id="shul">0</span>件商品

 var shul1=document.getElementById("shul");
 
    function jt(){
        var sum=0;
        for(var a=0;a<inpt1.length;a++){
            sum+=parseFloat(inpt1[a].value);
        }
        shul1.innerHTML=sum
    }

16、还能输入几个字

 <input type="text" id="b4" onkeyup="zs()">
var b44=document.getElementById("b4")

还能输入<span id="zishu">20</span>个字
var zishu1=document.getElementById("zishu")

b44.onkeyup=function(){
    var n=20-b44.value.length;
    zishu1.innerHTML=n;
    if(n<0){
        alert("字数有限");
        zishu1.innerHTML=0;
        b44.value=b44.value.substring(0,20)
    }
}

17、点击图片出现在下面

 <p id="p1">
                <img src="../1.gif" alt="" class="b3">
                <img src="../2.gif" alt="">
                <img src="../3.gif" alt="">
                <img src="../4.gif" alt="">
                。。。。。。
</p>

var j=0;
var p2=document.getElementById("p1")
var imgs=p2.getElementsByTagName("img")

for(var i=0;i<imgs.length;i++){
    imgs[i].index=i;
    imgs[i].onclick=function(){
        j=this.index+1;
    }
}