• JS-WebAPI练习

    文章目录

    循环自动设置复选框选中

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    今晚吃什么

    在这里插入图片描述

    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>Documenttitle>
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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    星光闪闪亮

    在这里插入图片描述

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    走马灯走一走鸭

    在这里插入图片描述

    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>Documenttitle>
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104

    我想学习

    在这里插入图片描述

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    同意协议

    在这里插入图片描述

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    显示隐藏密码

    在这里插入图片描述

    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>Documenttitle>
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    验证码倒计时

    在这里插入图片描述

    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>Documenttitle>
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    创建英雄列表

    在这里插入图片描述

    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>Documenttitle>
head>
<body>
    <button>创建英雄列表button>
    <ul>
        <li><img src="./uploads/heros/01.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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
  • 相关阅读:
    自动化您的Instagram帐户的程序InstaBot Pro 7.0.2
    IPKISS Tutorials 1------导入 pdk
    善用浏览器的一些调试技巧
    leetcode算法每天一题 020: 有效的括号(c++ stack＜＞ queue＜＞的简单使用 )
    Compiere的应用字典介绍
    计算机毕业设计ssm校园快递代取管理系统t914g系统+程序+源码+lw+远程部署
    Node.js之async 和 await 关键字及微任务和宏任务
    pytorch搭建squeezenet网络的整套工程（升级版）
    2023最新版JavaSE教程——第4天：流程控制语句之循环语句
    WPF 制作雷达扫描图
  • 原文地址：https://blog.csdn.net/qq_44714543/article/details/126150385