WebApi难点练习与解析

最新推荐文章于 2022-03-21 23:02:10 发布

XiaLuoCXY

最新推荐文章于 2022-03-21 23:02:10 发布

阅读量844

点赞数

文章标签： webview postman wpf

本文链接：https://blog.csdn.net/XiaLuoCXY/article/details/121930532

版权

<!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>
        /* .box {
            background-color: #149f5b;
        } */
    </style>
</head>

<body>
    <ul>
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <li>我是班长6</li>
        <li>我是班长7</li>
        <li>我是班长8</li>
        <li>我是班长9</li>
        <li>我是班长10</li>
    </ul>
    <script>
        // 获取元素
        let liList = document.querySelectorAll('li')
            //  添加元素
        for (let i = 0; i < liList.length; i++) {
            // 双数的下标变为粉色，也就是浏览器显示的单数行变为粉色，这个得注意一下
            if (i % 2 == 0) {
                liList[i].style.backgroundColor = 'pink'
                    // 其余的变为红色
            } else {
                liList[i].style.backgroundColor = 'red'
            }
            // 加入事件鼠标移入
            liList[i].onmouseenter = function() {
                    // 这一串代码的大概意思是把括号里的原始属性放入一个叫
                    // box类名里setAttribute大概就是存入的意思（类名是自己虚构的爱叫啥叫啥）
                    this.setAttribute('box', liList[i].style.backgroundColor)
                        // 鼠标移入改变小li的颜色为黄颜色
                    liList[i].style.backgroundColor = 'yellow'
                }
                // 加入事件鼠标移出
            liList[i].onmouseout = function() {
                // 这一串代码大概就是把之前存入类名为box的属性拿出来
                liList[i].style.backgroundColor = liList[i].getAttribute('box')
            }
        }
    </script>
</body>

</html>

。。隔行变色案例

<!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: 80px;
        }
        
        input[type='text'] {
            width: 50px;
            height: 44px;
            outline: none;
            border: 1px solid #ccc;
            text-align: center;
            border-right: 0;
        }
        
        input[type='button'] {
            height: 24px;
            width: 22px;
            cursor: pointer;
        }
        
        input {
            float: left;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" id="total" value="1" readonly />
        <input type="button" value="+" id="add" />
        <input type="button" value="-" id="reduce" />
    </div>
    <script>
        // 获取元素，（记住id一定要用#号不然出错）
        let total = document.querySelector('#total')
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')
            // 添加事件
        add.onclick = function() {
                // 点击加号数字框自加，value表单要用
                total.value++
                    // 解除禁用
                    reduce.disabled = false
            }
            // 点击事件，点击减号
        reduce.onclick = function() {
            // 点击加号数字框自减
            total.value--
                // 到0以后按键禁用
                if (total.value == 0) {
                    // disabled就是禁用的意思，true开始禁用，false结束禁用
                    reduce.disabled = true
                }
        }
    </script>
</body>

</html>

购物车加减案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        .title {
            background-color: skyblue;
            color: white;
        }
        
        img {
            width: 200px;
            height: 200px;
            box-shadow: 0 0 20px hotpink;
        }
    </style>
</head>

<body>
    <h2 class="title">图片切换</h2>
    <img alt="" src="./images/01.jpg" />
    <br />
    <input id="prev" type="button" value="上一张" />
    <input id="next" type="button" value="下一张" />

    <script>
        let nav = [
                './images/01.jpg',
                './images/02.jpg',
                './images/03.jpg',
                './images/04.jpg',
                './images/05.jpg',
            ]
            // console.log(nav);
        let max = 0
            // <!-- 获取元素 -->
        let img = document.querySelector('img')
        let prev = document.querySelector('#prev')
        let next = document.querySelector('#next')
            // 加入事件
        next.onclick = function() {
                // 如果max等于此数组最后一张的时候进入，然后把max归零重新
                if (max == nav.length - 1) {
                    max = 0
                        // 如果不满足的话就max++
                } else {
                    max++
                }
                // 这个就是点击切换图片
                img.src = nav[max]
            }
            // 加入事件
        prev.onclick = function() {
            // 因为这是从上一张开始所以，如果当max等于0的时候
            if (max == 0) {
                // 直接切换到数组长度减一，也就是最后一张图片，从新开始计数
                max = nav.length - 1
            } else {
                max--
            }
            // 点击切换图片
            img.src = nav[max]
        }
    </script>
</body>

</html>

图片切换案例

XiaLuoCXY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebApi难点练习与解析

<!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" /> <titl.
复制链接

扫一扫