小言_互联网的博客

JS，DOM试题1，在实践中应用，非常详细！！

2022-11-22 08:29 247人阅读  评论(0)

图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/reset.css">
	</head>
	<body>
		<div class="box">
			<form class="btn1">
				<input type="button" value="顺序播放" id="order">
				<input type="button" value="循环播放" id="loop">
			</form>	
			<p id="btnDes">图片顺序播放</p>
			<img src="img/1.jpg" id="pic">
			<p id="num">1/5</p>
			<form>
				<input type="button" value="上一幅" id="forward">
				<input type="button" value="下一幅" id="next">				
			</form>
			<!-- <p id="p">这是第一张图片</p>			 -->
		</div>
		<script>
			var txt = document.getElementById('num');
			var pic = document.getElementById('pic');
			var btndes = document.getElementById('btnDes');
			var t=0,num=1;		//t 是标记
			document.getElementById('order').onclick = function(){
					t=1;
					btndes.innerText = "图片顺序播放";	
				}	
			document.getElementById('loop').onclick = function(){
					t=2;
					btndes.innerText = "图片循环播放";
			}
			document.getElementById('next').onclick = function(){

				if(num == 5){
					if(t == 1){
						alert("这是最后一张");
						return;
					}
					else{
						num=0;
						pic.src="img/"+num+".jpg";		//修改图片的写法
						txt.innerText = num+"/5";		//修改txt的文本内容
					}
				}
				num++;
				pic.src="img/"+num+".jpg";
				txt.innerText=num+"/5";
				console.log(num);
			}
			document.getElementById('forward').onclick = function(){
				if(num == 1){
					if(t==1){
						alert("这是第一张");
						reutrn;
					}
					else{
						num=6;
						pic.src="img/"+num+".jpg";	
						txt.innerText = num+"/5";	
					}
				}
					num--;
					pic.src="img/"+num+".jpg";
					txt.innerText = num+"/5";
					console.log(num);
			}		
		</script>
	</body>
</html>

因为有顺序播放和循环播放两种模式

所以要分情况讨论

  1. 获取顺序播放和循环播放的元素

    因为要通过点击上一幅和下一幅来改变图片和数字

  2. 获取 上一幅和下一幅的 元素，num元素，图片元素

  3. 设置一个标记t，1表示顺序模式，2表示循环模式

    同时要用 btndes.innerText = ""; 来改变p标签的字

  4. 获取 上一幅和下一幅的 点击事件

  5. 如果是顺序播放时，点击到第五幅时再点击下一幅则 出现警示框，当点击到第一幅时再点击上一幅则 出现警示框

    如果是循环模式，点击到第五幅时再点击下一幅则 出现第一幅，当点击到第一幅时再点击上一幅则 出现第五幅

  6. 利用num记录 幅数

  7. pic.src="img/"+num+".jpg"; 来改变图像

  8. txt.innerText = num+"/5"; 改变id = num 的p标签

菜单折叠

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

    li {
        /*取消li小圆点*/
        list-style: none;
    }

    li span {
        /*给 span 标签设置背景图片（开头的小加号小减号，no-repeat不循环，初始位置 0 0）*/
        background: url(1.webp) no-repeat left center;
		background-size:20% 20%;
        padding-left: 20px;
    }

    /*起始样式*/
    li ul{
        height: 0;
        /*溢出隐藏*/
        overflow: hidden;
        /*添加过渡效果*/
        transition: all 0.5s;
    }
    /*展开样式*/
    .open{
        background-image:url(2.webp);
		background-size:20% 20%;
    }
    .open+ul{
        height: 70px;
    }


</style>
</head>

<body>

<ul class="tree">
    <li><span class="open">考勤管理</span>
        <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班出差</li>
        </ul>
    </li>
    <li><span>信息中心</span>
        <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班出差</li>
        </ul>
    </li>
    <li><span>协同办公</span>
        <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班出差</li>
        </ul>
    </li>
</ul>
    <script>
        var span = document.querySelectorAll('span');
        var ul = document.querySelectorAll('ul');
        for(var i=0;i<span.length;i++){
            span[i].onclick = function(){
            var current = this.nextElementSibling;    
                if(current.style.display == 'block'){
                    current.style.display = 'none';
                    this.className = '';
                }else{
                    current.style.display = 'block';
                    this.className = 'open';
                }
            }
        }
    </script>
</body>
</html>

点击 考勤管理/信息中心/协同办公 则展开ul，展开后再点击则关闭

  1. 获取全部 span 和 ul 的元素
  2. for循环 获取span的点击事件
  3. 因为在span的点击事件中不能使用 ul，所以用 this.nextElementSibling 获取与span对应的 ul
  4. if 当span展开时，点击则关闭
  5. else 否则，展开，并且 css 为open样式

字体放大和缩小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用JS操作样式属性更改元素字号大小</title>

</head>
<body>
	<input type="button" id="btn1" value="A-"/>
	<input type="button" id="btn2" value="A+"/>
	<p id="p1">"剩宴"不是中国传统，节约才是中华美德。</p>
	<script>
		var size = 16;
		document.getElementById('btn1').onclick = function(){
			size--;
			document.getElementById('p1').style.fontSize = size+'px';
		}
		document.getElementById('btn2').onclick = function(){
			size++;
			document.getElementById('p1').style.fontSize = size+'px';
		}
	</script>
</body>
</html>

通过点击 A- 使字体缩小，点击A+ 使字体增大

  1. 获取A-和A+ 的元素
  2. 分别获取A-和A+的点击事件
  3. 设置size作为字体初始值
  4. 点击A- 则 size–，点击A+，则size++
  5. 通过 document.getElementById('p1').style.fontSize = size+'px'; 获取P标签的style.fontSize，使字体增大或缩小

全选1

遇到的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" name="fun">运动
    <input type="checkbox" name="fun">唱歌
    <input type="checkbox" name="fun">写代码
    <input id="allcheck" type="checkbox">全选
    <button disabled>现在提交</button>
    <script>
            var inp = document.querySelectorAll('input');
            var al = document.getElementById('allcheck');
            var btn = document.querySelector('button');
            
            for(var i=0;i<inp.length;i++){
            inp[i].onclick = function(){
                var flag = true;
                var flag2 = true;
                for(var j=0;j<inp.length;j++){
                    if(!(inp[j].checked)){
                        flag = false
                    }
                    if(inp[j].checked){
                        flag2 = false;
                    }
                    al.checked = flag
                    btn.disabled = flag2
                }
            }
        }
        al.onclick = function(){
            for(var i=0;i<inp.length;i++){
                inp[i].checked = this.checked;
            }if(al.checked){
                btn.disabled = false;
            }else{
                btn.disabled = true;
            }
        }    
    </script>
</body>

</html>

双层for循环里 不要用this了，容易混淆

全选2

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        var all = document.getElementById('j_cbAll')
        var inp = document.querySelector('tbody').querySelectorAll('input')
       

        for(var i=0;i<inp.length;i++){
            inp[i].onclick = function(){
                var flag = true;
                for(var j=0;j<inp.length;j++){
                    if(!(inp[j].checked)){
                        flag = false
                    }
                    all.checked = flag
                }
            }
        }
        all.onclick = function(){
            for(var i=0;i<inp.length;i++){
                inp[i].checked = this.checked
            }
        }
    </script>
</body>

</html>

该套试题在我的资源里，可以自行下载


转载：https://blog.csdn.net/m0_62951223/article/details/127953010
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场