JS-WebAPI练习

最新推荐文章于 2023-05-21 17:51:24 发布

夏赞恩

最新推荐文章于 2023-05-21 17:51:24 发布

阅读量270

点赞数

分类专栏：前端学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44714543/article/details/126150385

版权

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

文章目录

循环自动设置复选框选中
今晚吃什么
星光闪闪亮
走马灯走一走鸭
我想学习
同意协议
显示隐藏密码
验证码倒计时
创建英雄列表

循环自动设置复选框选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox">
    <Script>
        var ipt = document.querySelector('input')
        var flag = false
        setInterval(function(){
            flag = !flag
            ipt.checked = flag

        }, 1000)
    </Script>
</body>
</html>

今晚吃什么

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span></span>
    <script>
        var menuList = ['凉拌毛豆','油焖小龙虾','排骨玉米汤','姐妹酸菜鱼']
        var span = document.querySelector('span')
        function randNum(min, max){
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
        setInterval(function(){
            span.innerText = menuList[randNum(0, menuList.length-1)]
        }, 1000)
    </script>
</body>
</html>

星光闪闪亮

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px; height:100px"></div>
    <script>
        var div = document.querySelector('div')
        function randNum(min, max){
            return Math.floor(Math.random() * (max-min+1) + min)
        }
        function randColor(){
            var blue = randNum(0,255)
            var green = randNum(0,255)
            var red = randNum(0,255)
            return `rgb(${red},${green},${blue})`
        }
       
        setInterval(function(){
            div.style.backgroundColor = randColor()
        },1000)
    </script>
</body>
</html>

走马灯走一走鸭

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id1 {
            width: 600px;
            height: 600px;
            position: relative;
            /* background-color: red; */
        }
        #id2 {
            width: 500px;
            height: 500px;
            position: relative;
            position: absolute;
            left: 300px;
            top:300px;
            transform: translate(-50%, -50%);
            /* background-color: orange; */
        }
        #id3 {
            width: 400px;
            height: 400px;
            position: relative;
            position: absolute;
            left: 250px;
            top:250px;
            transform: translate(-50%, -50%);
            /* background-color: yellow; */
        }
        #id4 {
            width: 300px;
            height: 300px;
            position: relative;
            position: absolute;
            left: 200px;
            top:200px;
            transform: translate(-50%, -50%);
            /* background-color: green; */
        }
        #id5 {
            width: 200px;
            height: 200px;
             position: relative;
            position: absolute;
            left: 150px;
            top:150px;
            transform: translate(-50%, -50%);
            /* background-color: lightgreen; */
        }
        #id6 {
            width: 100px;
            height: 100px;
            position: relative;
            position: absolute;
            left: 100px;
            top:100px;
            transform: translate(-50%, -50%);
            /* background-color: blue; */
        }
        #id7 {
            width: 50px;
            height: 50px;
             position: relative;
            position: absolute;
            left: 50px;
            top:50px;
            transform: translate(-50%, -50%);
            /* background-color: purple; */
        }
</style>
</head>
<body>
    <div id="id1">
         <div id="id2">
             <div id="id3">
                <div id="id4">
                    <div id="id5">
                        <div id="id6">
                            <div id="id7"></div>
                        </div>
                    </div>
                </div>
             </div>
         </div>  
    </div>
   
    <script>
        var divList = document.querySelectorAll('div')
        var colorList = ['red', 'orange', 'yellow', 'lightgreen', 'blue', 'purple']
        setInterval(function(){
            var first = colorList.shift()
            colorList.push(first)
            for(var i = 0; i < colorList.length; i++){
                divList[i].style.backgroundColor = colorList[i]
            }
        }, 1000)
    </script>
</body>
</html>

我想学习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>切换</button>
    <img src="./1.jpg"  height='400px' alt="">
    <script>
        var btn = document.querySelector('button')
        var img = document.querySelector('img')
        var picList = ['./1.jpg', './2.jpg', './3.jpg', './4.jpg', './5.jpg']
        function randNum(min, max){
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
        btn.addEventListener('click', function(){
            var num =  randNum(0, picList.length-1)
            img.src = picList[num]
        })
    </script>
</body>
</html>

同意协议

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox">
    <button>完成注册</button>
    <script>
        var ipt = document.querySelector('input')
        var btn = document.querySelector('button')
        ipt.addEventListener('click', function(){
            btn.disabled = !this.checked
        })
    </script>
</body>
</html>

显示隐藏密码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box label {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 35px;
            height: 24px;
            cursor: pointer;
            background: url(./images/close.jpg) no-repeat;
            background-size: cover;
        }
        .box label.active {
            top: -10px;
            width: 45px;
            height: 30px;
            background: url(./images/eye.jpg);
        }
    </style>
</head>
<body>
   <div class="box">
        <label for class></label>
        <input type="password" id="pwd">
   </div>
    <script>
        var label = document.querySelector('.box label')
        var ipt = document.querySelector('#pwd')
        label.addEventListener('click', function(){
            label.classList.toggle('active')
            if (ipt.type === 'text'){
                ipt.type = 'password'
            } else {
                ipt.type = 'text'
            }
        })
    </script>
</body>
</html>

验证码倒计时

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
            font-size: 18px;
        }
        #num {
            width: 65px;
            position: relative;
        }
        button {
            position: absolute;
            left:210px;
            margin-top: 3px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            手机号：
            <input type="text" id="mobile" >
        </li>
        <li>
            验证码：
            <input type="text" id="num">     
            <button>获取验证码</button>   
        </li>
    </ul>
   
    <script>

        var btn = document.querySelector('button')
        btn.addEventListener('click', function(){
            btn.disabled = true
            var time = 5
            function myFn(){
                time--;
                btn.innerHTML = `${time}秒之后获取`  // 这里只是显示时间
                if (time < 0){
                    clearInterval(timer)
                    btn.innerHTML = `获取验证码`
                    btn.disabled = false
                }
            }
            myFn()
            timer = setInterval(myFn,1000) //这里控制时间
        })
    </script>
</body>
</html>

创建英雄列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>创建英雄列表</button>
    <ul>
        <li><img src="./uploads/heros/01.jpg" alt=""></li>
        <!-- <li><img src="./uploads/heros/02.jpg" alt=""></li>
        <li><img src="./uploads/heros/03.jpg" alt=""></li>
        <li> <img src="./uploads/heros/04.jpg" alt=""></li>
        <li> <img src="./uploads/heros/05.jpg" alt=""></li> -->
    </ul>
   
    <script>
        var btn = document.querySelector('button')
		var datas = [
			{ name: '司马懿', imgSrc: '01.jpg' },
			{ name: '女娲', imgSrc: '02.jpg' },
			{ name: '百里守约', imgSrc: '03.jpg' },
			{ name: '亚瑟', imgSrc: '04.jpg' },
			{ name: '虞姬', imgSrc: '05.jpg' },
		];
		let listUL = document.querySelector('.list')
		let btn = document.querySelector('button')
		btn.addEventListener('click', function () {
			// 7. 遍历数据, 有多少个对象, 就创建多少套li
			for (let i = 0; i < datas.length; i++) {
				let obj = datas[i]
				// 4. 创建标签
				let theLi = document.createElement('li')
				let theImg = document.createElement('img')
				// 5. 添加标签
				theLi.appendChild(theImg)
				listUL.appendChild(theLi)
				// 6. img设置内容和图片
				theImg.src = './uploads/heros/' + obj.imgSrc
				theImg.title = obj.name
			}

		})
	
    </script>
</body>
</html>