JS07-DOM-class案例

最新推荐文章于 2024-09-14 17:14:08 发布
最新推荐文章于 2024-09-14 17:14:08 发布
阅读量1.5k 收藏 22
点赞数 56
分类专栏： JavaScript基础 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/colorsZeroz/article/details/136769833
版权

案例

倒计时

<!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>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam, voluptate. Dignissimos harum error magni beatae, itaque delectus! Tempora impedit dolor deleniti! Totam aliquid repellendus asperiores hic obcaecati? Doloremque, debitis autem?
    </textarea>
    <br>
    <button class="btn" disabled>已阅读协议(6)   
    </button>
    <script>
        let btn = document.querySelector('.btn')
        let i = 6
        let timer = setInterval(function(){
            i--
            btn.innerHTML = `已阅读协议(${i})`
            if (i === 0){
                clearInterval(timer)
                btn.disabled = false
                btn.innerHTML = `已阅读协议`
            }
        },1000)
    </script>
</body>
</html>

焦点图

Document

1111

随机抽人

<!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>随机抽人</title>
    <style>
        div{
            width: 400px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
        }
        h2{
            text-align: center;
        }
        span{
            text-align: center;
            display: block;
            line-height: 50px;
        }
        .start{
            margin-left: 50px;
        }
        .end{
            float: right;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <div>
        <h2>随机抽人</h2>
        <span>1</span>
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
    <script>
        let name = document.querySelector('span')
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        let data = ['刻晴','香菱', '凝光','甘雨','钟离']
        let timer = 0
        let random = 0
        start.addEventListener('click',function(){
            timer = setInterval (function(){
                random = getRandomIntInclusive(0,data.length - 1)
                name.innerHTML = data[random]
            },100)
            start.disabled = true
            end.disabled = false
            if(data.length === 1){
                clearInterval(timer)
                start.disabled = true
                end.disabled = true
            }
        })    
        end.addEventListener('click',function(){
            clearInterval(timer)
            data.splice(random,1)
            end.disabled = true
            start.disabled = false
            if( data.length === 1){
                start.disabled = true
                end.disabled = true
            }
        })    
    </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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        .mi{
            position: relative;
            width: 223px;
            margin: 100px auto;
        }

        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid rgb(192, 192, 192);
            outline: none;
            transition: all .2s;
        }

        .mi .search {
            border: 2px solid #ff6700;
        }

        .list{
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: white;
            display: none;
        }

        .list a {
            display: block;
            padding:  6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="mi">
        <input type="search" placeholder="小米">
        <ul class="list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10s</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        let search = document.querySelector('input[type="search"]')
        let list = document.querySelector('.list')
        // 获取焦点 focus mouseenter
        search.addEventListener('mouseenter',function(){
            list.style.display = 'block'
            search.classList.add('search')
            
        })
        // 失去焦点 blur mouseleave
        search.addEventListener('mouseleave',function(){
            list.style.display = 'none'
            search.classList.remove('search')
        })
    </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>
        *{
            margin: 0;
            padding: 0;
        }
        .w{
            width: 400px;
            height: 200px;
            margin: 0 auto;
        }
        textarea{
            width: 400px;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="controls">
            <textarea id="area" placeholder="说点什么把..." name="" id="" cols="30" rows="10" maxlength="200"></textarea>
            <div>
                <span class="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>
        <div class="contentList">
            <ul></ul>
        </div>
    </div>
    
    <script>
        // 1.获取元素
        let area = document.querySelector('#area')
        let useCount = document.querySelector('.useCount')
        // 2.添加事件
        area.addEventListener('input',function(){
            useCount.innerHTML = area.value.length
        })
    </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>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center
        }
        th{
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        .allCheck{
            width: 80px;
        } 
        tr:nth-child(1){
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox"  id="checkAll"><span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" name="checl" class="ck">
            </th>
            <th>小米手机</th>
            <th>小米</th>
            <th>1999</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" name="checl" class="ck">
            </th>
            <th>小米净水器</th>
            <th>小米</th>
            <th>4999</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" name="checl" class="ck">
            </th>
            <th>小米电视</th>
            <th>小米</th>
            <th>5999</th>
        </tr>
    </table>
    <script>
        let all = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let span = document.querySelector('span')
        all.addEventListener('click',function(){
            for( let i = 0; i < cks.length; i++){
                cks[i].checked = all.checked
            }
            if (all.checked === true){
                span.innerHTML = '取消'
            }else{
                span.innerHTML = '全选'
            }
        })
        for (let i = 0;i < cks.length; i++ ){
            cks[i].addEventListener('click',function(){
                // 点击一次遍历所有check
                for( let j = 0; j < cks.length; j++){
                    if(cks[j].checked === false) {
                        all.checked = false
                        // 退出循环 结束点击事件
                        return
                    }
                }
                all.checked = true
            })
        }
    </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>
        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]{
            width: 22px;
            height: 24px;
            cursor: pointer;
        }
        input{
            float: left;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" name="" id="total" value="1" readonly>
        <input type="button" value="+" id="add">
        <input type="button" value="-" id="reduce" disabled>
    </div>
    <script>
        let total = document.querySelector('#total')
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')
        add.addEventListener('click',function(){
            total.value++
            reduce.disabled = false
        })
        reduce.addEventListener('click',function(){
            total.value--
            if (total.value <= 1){
                reduce.disabled = true
            }
        })
    </script>
</body>
</html>

重点

回调函数

        function fn(){}
        setInterval(fn,1000)
        // fn是回调函数

环境变量this

<body>
    <button>点击</button>
    <script>
        function fn(){
            console.log(this);
        }
        window.fn()
        let btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(typeof this);
        })
    </script>
</body>

排他思想

<!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>
        .color{
            background: skyblue;
        }
    </style>
</head>
<body>
    <button class="color">第1个</button>
    <button>第2个</button>
    <button>第3个</button>
    <button>第4个</button>
    <button>第5个</button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++){
            btns[i].addEventListener('click',function(){
                // 干掉所有人
                // for (let j = 0; j < btns.length; j++){
                //     btns[j].classList.remove('color')
                // }
                document.querySelector('.color').classList.remove('color')
                // 我自己
                this.classList.add('color')
            })
        }
    </script>
</body>
</html>

案例tab栏切换

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 0 auto;
            width: 1600px;
            height: 920px;
        }
        .top{
            width: 1600px;
            height: 20px;
        }
        .con{
            width: 1600px;
            height: 900px;
        }
        .con img{
            width: 100%;
            display: none;
            
        }
        ul{
            list-style: none;
            display: flex;
        }
        .box ul .item{
            flex: 1;
            border: 1px solid blue;
            text-align: center;
        }
        .box ul .active{
            background: blue;
            color: aqua;
        }
        .con .active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <ul>
                <li class="item active">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>
            </ul>
        </div>
        <div class="con">
            <img src="../../resources/image/background/1.jpg" alt="" class="active">
            <img src="../../resources/image/background/2.jpg" alt="">
            <img src="../../resources/image/background/3.jpg" alt="">
            <img src="../../resources/image/background/4.jpg" alt="">
        </div>
    </div>
    <script>
        let lis = document.querySelectorAll('.item')
        let imgs = document.querySelectorAll('img')
        for(let i = 0 ; i < lis.length; i++){
            lis[i].addEventListener('click',function(){
                document.querySelector('.box ul .active').classList.remove('active')
                this.classList.add('active')
                document.querySelector('.con .active').classList.remove('active')
                imgs[i].classList.add('active')
            })
            
        }
    </script>
</body>
</html>
colorsZeroz
关注
专栏目录
JavaScript--DOM案例（一）
qq_48256263的博客
07-05 693
JavaScript--DOM案例（一）
JavaScript-DOM实战案例
Welisit的博客
09-17 386
有时我们并不想一个函数，而是之后再执行，我们称之为“（scheduling a call）”。目前有两种方式可以实现： 允许我们将函数到一段时间间隔之后再执行。 允许我们一个函数，从一段之后开始运行，之后以该时间间隔连续重复运行该函数。并且通常情况下有提供对应的取消方法：大多数运行环境都有内置的调度程序，并且提供了这些方法：的语法如下：方法： 3.setInterval的使用 方法和 的语法相同：方法： 2.关闭隐藏信息 3.侧边栏展示 4.登录框 5.王者荣耀tabControl 6.王者轮播
JS-DOM应用详解
OYBY123的博客
03-22 333
如何利用dataset 添加属性data-* eg：data-id data-title data-自定义< div class = "box" data - id = "1" data - title = "标题" data - age = "18" > div标签 < / div > < script > var odiv = document . querySelector("div");
React页面路由 react-router-dom
橘猫吃不胖的博客
03-09 2589
React页面路由1 背景2 hash模式3 history模式3 React实现页面路由的模块：react-router-dom3.1 安装3.2 HashRouter和BrowserRouter：路由的容器3.3 Route：路由与组件之间的映射3.4 Router：管理路由的状态3.5 Link和NavLink：跳转链接3.6 Redirect：页面重定向3.7 Switch：路由切换3.8 withRouter：包装器3.9 Router Hooks：在函数组件中获取路由信息3.10 history
react-router-dom学习及案例
不疲不倦的博客
08-10 416
react-router-dom学习 三大核心： Router 所有组件共用的最外层 Route 路由规则匹配，并显示当前规则匹配到的组件 Link 路由的跳转组件，会渲染为a标签【通过this.props.history.push(path)来改变HashRouter中的pathname属性，进而驱动Route们进行重新渲染，匹配路由实现路由切换】 其他： HashRouter url为hash的路由，原理是window.location.hash BrowserRouter 浏览器的路由组件 M
javaScript---DOM操作
平安喜乐
10-11 624
html-DOM操作与一些案例
JavaScript-DOM案例学习笔记
To_Ma_To的博客
01-14 966
整理出最近学习的几个案例：仿京东显示隐藏密码明文案例、仿淘宝关闭二维码案例、密码框验证信息、百度换肤、新浪下拉菜单...
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3580
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
JavaScript-DOM仿新浪注册页面案例
记录开发日常
05-20 828
效果演示 undefined 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS-Vertiefung-DOM-Onclick-Style-level-2.1
04-03
压缩包文件名为"JS-Vertiefung-DOM-Onclick-Style-level-2.1-master"暗示这是一个项目文件，其中可能包含HTML、CSS和JavaScript文件，以及测试案例、注释和文档，用于学习和实践上述概念。 通过这个主题的学习，...
JS07-DOM-class案例重置版
colorsZeroz的博客
03-22 571
倒计时、焦点图、随机抽人、小米搜索框、。加减操作、环境变量this、排他思想、案例tab栏切换。
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4427
[项目][WebServer][日志设计]详细讲解
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 874
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
前端项目node版本问题导致依赖安装异常的处理办法
最新发布
weixin_44703272的博客
09-14 252
解决前端项目中的Node版本问题通常涉及以下步骤：检查项目文档：查看项目是否有特定的Node版本要求，如果有，确保你的Node版本与之兼容。使用Node版本管理器：如nvm（Node Version Manager）或n。它们可以让你在同一台机器上安装和切换不同版本的Node。
JS笔记
2201_76100326的博客
09-11 501
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 463
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1319
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
Vue实战：v-for与v-bind实现列表颜色切换效果
在Vue.js中，v-for和v-bind是两个非常重要的指令，它们分别用于列表渲染和属性绑定。在这个例子中，我们看到如何结合这两个指令来实现在鼠标点击时改变列表项颜色的效果。 首先，v-for指令用于遍历数组或对象并生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

colorsZeroz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值