JS常见案例总结(一)

其他 2021-03-30 00:22:24 阅读次数: 0

JS常见案例总结（一）

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>
    <style>
        div {
     
     
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
     
     
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
     
     
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
     
     
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
     
     
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
     
     
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
     
     
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

2、排他思想

<!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>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
     
     
            btns[i].onclick = function() {
     
     
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
     
     
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>

</html>

在这里插入图片描述

3、页面换肤

<!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>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        
        body {
     
     
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
     
     
            list-style: none;
        }
        
        .baidu {
     
     
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
     
     
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
     
     
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
     
     
            imgs[i].onclick = function() {
     
     
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

4、表格隔行换色

<!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>
    <style>
        table {
     
     
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
     
     
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
     
     
            height: 30px;
        }
        
        tbody td {
     
     
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
     
     
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
     
     
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
     
     
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
     
     
                this.className = '';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

5、全选与反选

<!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>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
     
     
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
     
     
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
     
     
            j_tbs[i].onclick = function() {
     
     
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
     
     
                    if (!j_tbs[i].checked) {
     
     
                        flag = false;
                     // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

6、tab栏切换

<!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>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        
        li {
     
     
            list-style-type: none;
        }
        
        .tab {
     
     
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
     
     
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
     
     
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
     
     
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
     
     
            padding: 20px 0 0 20px;
        }
        
        .item {
     
     
            display: none;
            height: 300px;
            background-color: #c81623;
        }
        .item:nth-child(2){
     
     
            background-color: aqua;
            
        }
        .item:nth-child(3){
     
     
            background-color: #393953;
        }
        .item:nth-child(4){
     
     
            background-color: #898989;
        }
        .item:nth-child(5){
     
     
            background-color: #ff78ff; 
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
     
     
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
     
     
                // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
     
     
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
     
     
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

7、简单发布留言

<!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>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        
        body {
     
     
            padding: 100px;
        }
        
        textarea {
     
     
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
     
     
            margin-top: 50px;
        }
        
        li {
     
     
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
     
     
            if (text.value == '') {
     
     
                alert('您没有输入内容');
                return false;
            } else {
     
     
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

8、三级联动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		form{
     
     
			width: 500px;
			height: 200px;
			background-color: aquamarine;
			margin: 30px auto;
			padding: 100px 85px;
			box-sizing: border-box;
			position: relative;
		}
		form select{
     
     
			width: 100px;
			height: 30px;
		}
		form .title{
     
     
			text-align: center;
			position: absolute;
			top: 25px;
			left: 50%;
			transform: translateX(-50%);
		}
	</style>
</head>
<body>
	<form action="">
		<div class="title">省市区 三级联动</div>
		<select  id="sheng">
			<option value="-1">请选择</option>
		</select>
		<select  id="shi"></select>
		<select  id="xian"></select>
	</form>
	<script>
		var shengs = ['山东省','江苏省','河北省'];

		var shis = [
			['济南市','青岛市','烟台市','临沂市'],
			['南京市','徐州市','无锡市','常州市'],
			['石家庄市','唐山市','秦皇岛市','张家口市']
		];

		var xianqus =[
			[
			 ['历下区','市中区','槐荫区','长清区'],
			 ['市南区','市北区','四方区','黄岛区'],
			 ['芝罘区','莱山区','牟平区','蓬莱市'],
			 ['兰山区','北城新区','河东区','罗庄区']
			 ],[
			 ['玄武区','白下区','秦淮区','鼓楼区'],
			 ['云龙区','九里区','贾汪区','泉山区'],
			 ['崇安区','南长区','北塘区','锡山市'],
			 ['天宁区','钟楼区','新北区','武进区']
			 ],[
			 ['长安区','桥东区','桥西区','新华区'],
			 ['开平区','古治区','路北区','路南区'],
			 ['海港区','山海关区','北戴河区','卢龙县'],
			 ['宣化区','下花园区','张北县','沽源区']	 
			 ]
			];
			
			var sheng =document.getElementById('sheng');
			var shi = document.getElementById('shi');
			var xianqu = document.getElementById('xian');
			function adds(bq,data){
     
     
				for(var i in data){
     
     
					var datas = new Option(data[i],i);
					bq.options.add(datas);
				}
			}

			adds(sheng,shengs);
			sheng.onchange = function(){
     
     
				shi.options.length = 0;
				adds(shi,shis[sheng.value]);
				if(sheng.value >= 0){
     
     
					shi.onchange();
				}else{
     
     
					xianqu.options.length = 0;
				}
			}

			shi.onchange = function(){
     
     
				xianqu.options.length = 0;
				adds(xianqu,xianqus[sheng.value][shi.value]);
			}
	</script>
</body>
</html>

在这里插入图片描述

9、时钟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- css -->
	<style>
	
	*{
     
     margin: 0;padding: 0;list-style: none;
	}
	
	#box{
     
     width: 600px;height: 600px;background: url(https://gitee.com/miaoxiaocunzai/blog/raw/master/clock.jpg) no-repeat;
		margin: 10px auto;

		position: relative;
	}

	#hour,#min,#second{
     
     width: 30px;height: 600px;position: absolute;left: 50%;top:10px;
		margin-left: -15px;
	}
	
	#hour{
     
     background: url(./images/hour.png) no-repeat center center;}
	#min{
     
     background: url(./images/minute.png) no-repeat center center;}
	#second{
     
     background: url(./images/second.png) no-repeat center center;}
	</style>
</head>
<body>
	<!-- html -->
	<div id="box">
		<div id="hour"></div>
		<div id="min"></div>
		<div id="second"></div>
	</div>
</body>
<!-- JavaScript -->
<script>
	window.onload =function(){
     
     
		// 获取需要的标签
		var hour = document.getElementById("hour");
		var min = document.getElementById("min");
		var second = document.getElementById("second");
		// 开始定时器
		setInterval(function(){
     
     
		// 获取当前的时间
		var date = new Date();
		// 求出总毫秒数
		var millS =date.getMilliseconds();
		// 秒
		var s = date.getSeconds() + millS/1000;
		// 分
		var m =	date.getMinutes() + s/60;
		// 时
		var h = date.getHours() % 12 + m/60;
		// 旋转起来                          
		hour.style.transform = 'rotate('+ h * 30 +'deg)';
        min.style.transform = 'rotate('+ m * 6 +'deg)';
		second.style.transform = 'rotate('+ s * 6 +'deg)';
	},10);
}
	</script>
</html>

在这里插入图片描述

10、轮播图

   <!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>轮播图的实现</title>
    <style>
	    	* {
     
     
	    box-sizing: border-box;
	    padding: 0;
	    margin: 0;
	}
	
	body {
     
     
	    background-color: gray;
	}
	
	div {
     
     
	    width: 700px;
	    height: 400px;
	    margin: 100px auto;
	    position: relative;
	}
	
	ul {
     
     
	    list-style: none;
	}
	
	.images li {
     
     
	    position: absolute;
	    opacity: 0;
	    transition: 0.6s;
	}
	
	.images .active {
     
     
	    opacity: 1;
	}
	
	.images img {
     
     
	    width: 700px;
	    height: 400px;
	    cursor: pointer;
	}
	
	.dots {
     
     
	    position: absolute;
	    bottom: 20px;
	    left: 250px;
	}
	
	.dots li {
     
     
	    width: 15px;
	    height: 15px;
	    border-radius: 50%;
	    border: solid 2px #fff;
	    display: inline-block;
	    margin-right: 10px;
	    cursor: pointer;
	    transition: 0.6s;
	}
	
	.dots .white {
     
     
	    background-color: #fff;
	    box-shadow: 0 0 1px 5px rgba(0, 0, 0, 0.3)
	}
	.fa{
     
     
	    color: #fff;
	    cursor: pointer;
	    /* background-color:rgb(29, 26, 26); */
	    width: 40px;
	    height: 60px;
	    text-align: center;
	    line-height: 60px;
	    opacity: 0.3;
	}
	.fa:hover{
     
     
	    opacity: 0.6;
	}
	#left{
     
     
	    position: absolute;
	    top: 180px;
	}
	#right{
     
     
	    position: absolute;
	    top: 180px;
	    right: 0;
	}
    </style>
</head>
<body>
    <div class="banner">
        <ul class="images">
            <li class="active">
                <img src="imgs/57523a17c02ad.jpg" alt="">
            </li>
            <li>
                <img src="imgs/59c898949b98b.jpg" alt="">
            </li>
            <li>
                <img src="imgs/5bbd6379b2b20.jpg" alt="">
            </li>
            <li>
                <img src="imgs/81a9a1506c024141ea5ea8888e935ca3bbd7bf56.jpg" alt="">
            </li>
            <li>
                <img src="imgs/one.jpg" alt="">
            </li>
            <li>
                <img src="imgs/vkleVabkBxvBupx.jpg" alt="">
            </li>
        </ul>
        <ul class="dots">
            <li class="white"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <i id="left" class="fa fa-chevron-left fa-3x"></i>
        <i id="right" class="fa fa-chevron-right fa-3x"></i>
    </div>
</body>
<script >
var lisImg = document.querySelectorAll(".images li");
var lisDot = document.querySelectorAll(".dots li");
var banner = document.querySelector("div");

var left = document.getElementById("left");
var right = document.getElementById("right");

var timer;
var number = 0;

function show() {
     
     
    for (var j = 0; j < lisDot.length; j++) {
     
     
        lisDot[j].className = "";
        lisImg[j].className = "";
    }
    lisDot[number].className = "white";
    lisImg[number].className = "active";
}
show()

// 往下轮播下一张
var next = function () {
     
     
    number++;
    if (number >= lisDot.length) {
     
     
        number = 0;
    }
    show();
}
timer = setInterval(next, 1500);

// 往上轮播上一张
// function prev(){
     
     
//     timer = setInterval(function(){
     
     
//         number--;
//         if(number < 0){
     
     
//             number = lisDot.length - 1;
//         }
//         show();
//     }, 1000);
// }
// prev()

// 当鼠标放在图片上时，停止自动轮播，清除定时器
banner.onmousemove = function () {
     
     
    clearInterval(timer);
}
// 当鼠标离开图片时，继续进行自动轮播
banner.onmouseleave = function () {
     
     
    timer = setInterval(next, 1500);
}

// 滑点轮播
for (var i = 0; i < lisDot.length; i++) {
     
     
    lisDot[i].index = i;
    lisDot[i].onmousemove = function () {
     
     
        // clearInterval(timer);
        for (var k = 0; k < lisDot.length; k++) {
     
     
            lisDot[k].className = "";
            lisImg[k].className = "";
        }
        this.className = "white";
        lisImg[this.index].className = "active";
    }
  
    lisDot[i].onmouseleave = function () {
     
     
        number = this.index;
        timer = setInterval(next, 1500);
    }
}

left.onclick = function () {
     
     
    number--;
    if (number < 0) {
     
     
        number = lisDot.length - 1;
    }
    show();
}

// 下一张
right.onclick = function () {
     
     
    number++;
    if (number >= lisDot.length) {
     
     
        number = 0;
    }
    show();
}

</script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44676935/article/details/105346298
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022