DOM-事件基础（案例源代码）

最新推荐文章于 2022-07-12 21:08:49 发布
最新推荐文章于 2022-07-12 21:08:49 发布
阅读量151 收藏
点赞数
分类专栏： 前端 文章标签： javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bying666/article/details/125052331
版权

DOM-事件基础（案例源代码）

案例1

1
源代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .erweima {
            position: relative;
            width: 160px;
            height: 160px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }

        .erweima i {
            position: absolute;
            left: -13px;
            top: 0;
            width: 10px;
            height: 10px;
            border: 1px solid #ccc;
            font-size: 12px;
            line-height: 10px;
            color: #ccc;
            font-style: normal;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="erweima">
        <img src="../images/code.png" alt="">
        <i class="close_btn">x</i>
    </div>
    <script>
    //获取元素
        let close_btn = document.querySelector('.close_btn')
        //注册事件
        close_btn.addEventListener('click', function() {
            //使其父元素隐藏
            this.parentNode.style.display = 'none'
        })

    </script>
</body>

</html>

案例2

2
3
源代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        let qs = document.querySelector('.qs')
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let random = 0
        let timer = 0
        // 数据数组
        let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        start.addEventListener('click', function() {
            timer = setInterval(function() {
                random = getRandom(0, arr.length - 1)
                qs.innerHTML = arr[random]
            }, 100)

            if(arr.length === 1) {
                this.disabled = true
                end.disabled = true
            }
        })

        end.addEventListener('click', function() {
            clearInterval(timer)
            arr.splice(random, 1)

        })
    </script>
</body>

</html>

案例3

4
源代码

<!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 #e0e0e0;
            outline: none;
        }

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

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

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }
    </style>

</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-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 input = document.querySelector('input')
        let re = document.querySelector('.result-list')

        input.addEventListener('focus', function() {
            this.classList.add('search')
            re.style.display = 'block'
        })
        input.addEventListener('blur', function() {
            this.classList.remove('search')
            re.style.display = 'none'
        })


    </script>
</body>

</html>

案件4

5
6
源代码

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></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 {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    let checkAll = document.querySelector('#checkAll')
    let ck = document.querySelectorAll('.ck')
    let text = document.querySelector('.all')

    checkAll.addEventListener('click', function() {
      for(let i = 0; i < ck.length; i++) {
        ck[i].checked = this.checked
      }
      if(this.checked === true) {
        text.innerHTML = '取消'
      }else {
        text.innerHTML = '全选'
      }
    })

    for(let i = 0; i < ck.length; i++) {
      ck[i].addEventListener('click', function() {
        for(let j = 0; j < ck.length; j++) {
          if(ck[j].checked === false) {
           checkAll.checked = false
           text.innerHTML = '全选'
            return
          }
        }

           checkAll.checked = true
           text.innerHTML = '取消'
      })
    }
  </script>
</body>

</html>

案例5

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>
    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" disabled>
    <script>
      let text = document.querySelector('#total')
      let add = document.querySelector('#add')
      let reduce = document.querySelector('#reduce')

      add.addEventListener('click', function() {
        text.value++
        reduce.disabled = false
      })
      reduce.addEventListener('click', function() {
        text.value--
        if(text.value === '1') {
          this.disabled = true
        }
      })
    </script>
  </div>
</body>

</html>

案例6

8
9
源代码

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }

    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }

    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }

    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }

    .products .main {
      float: left;
      display: none;
    }

    .products .main.active {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
      <div class="main active">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>

  <script>
    let tab = document.querySelectorAll('.tab-item') 
    let main = document.querySelectorAll('.main')

    for(let i = 0; i < tab.length; i++) {
      tab[i].addEventListener('click', function() {
        document.querySelector('li.active').classList.remove('active')
        this.classList.add('active')
        document.querySelector('.main.active').classList.remove('active')
        main[i].classList.add('active')
      })
    }
  </script>


</body>

</html>

第二阶段案例over！

bying666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM案例-----实现多附件上传
刘海闯的专栏
03-02 652
使用DOM方法实现多附件上传客户端 function addFile(){ //创建tr标签 var tr1=document.createElement("tr"); //创建td标签 var td1=document.createElement("td"); //创建input标签 var input1=document.createElement("input");
python 基础源代码
weixin_56859060的博客
10-25 543
#print输出 print(520) print('hello world') #输出运算符的表达式 print(3+2) #将数据输出到文件中 (将值负给fp) fp=open('D:/text.txt','a+')#这里的储存盘必须是c盘以外的；a+为 ：有则输出 无则添加 print('hello world!',file=fp)#必须加file= fp.close()#关闭fp #不进行换行输出","分嗝 print('hello','world') #转义字符 print('hello\.
js和dom用法案例
04-02
asp.net网络编程必备js和dom用法案例
基础代码
游泳的鱼的专栏
04-30 734
#中文 QString str = QString::fromLocal8Bit("中文"); ui->lineEdit_init->setText(QStringLiteral("所有设备准备就绪")); #Qt打包 windeployqt # QString转换为char * QString str; char* ch; QByteArray ba = str.toLatin1(); ch=ba.data(); #include <QTextCodec> QTextCod.
JavaScript前端开发案例教程-源代码.rar
07-02
总之，"JavaScript前端开发案例教程-源代码.rar"提供了一个全面学习和实践JavaScript前端开发的平台，通过分析和运行这些源代码，你不仅可以巩固基础知识，还能了解前沿技术，提升自己的开发能力。建议按照文件的...
javascript基础教程源代码
09-12
这个"javascript基础教程源代码"很可能是为了帮助初学者理解JavaScript的基本概念、语法和功能而编写的教学材料。接下来，我们将深入探讨JavaScript的基础知识。 1. **变量与数据类型**：JavaScript支持七种数据...
Vue.js前端开发实战-源代码.zip
07-07
本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料，提供了一套完整的实战项目源代码，帮助学习者深入理解Vue.js的实践应用。 在Vue.js中，我们首先要了解的基本概念有： 1. **组件化**：Vue.js的核心...
js DOM的事件常见操作实例详解
10-15
在JavaScript中，DOM事件处理涉及三个关键要素：事件源、事件和事件处理程序。 1. 事件源（Event Target）：事件源是指触发事件的HTML元素，例如用户点击的按钮或者鼠标悬停的图像。在JavaScript中，可以通过`...
JavaScript+jQuery交互式Web前端开发-源代码.zip
04-16
本教程的源代码中，可能包含了以下知识点： 1. DOM（文档对象模型）操作：使用 JavaScript 或 jQuery 选取、创建、修改和删除 HTML 元素。 2. 事件处理：绑定点击、滚动、键盘输入等事件，响应用户操作。 3. 动画...
dom
02-24
dom
手工HTML代码转换为DOM代码
06-17
手工HTML代码转换为DOM代码,这个小例子是我在学习JavaScript DOM过程中遇到的小例子，感觉非常好，拿来分享给大家。
Java基础 全套源代码
09-23
本源码是传智播客毕向东老师 视频讲义的配套源代码。内容详细包含课程讲义。本资源是Java基础知识部分的完整源代码。
源代码js DOM
07-11
这是javascript DOM这本书的源代码。书中总共有12章。
DOM编程
weixin_67235801的博客
03-03 1026
有趣的网页编码
一些基础的java编程代码
热门推荐
qq_51114085的博客
07-12 1万+
一些基础的java代码
Dom解析操作源代码
欲望以提升热忱 毅力以磨平高山
05-06 1227
package tan.dom;import java.io.*;import javax.xml.parsers.*;import org.w3c.dom.*;public class Test_dom_01 {public static void main(String[] args) throws Exception {//取得DocumentBuilderFactory对象Document
vue的源码学习之一——Snabbdom源码学习
路在脚下，幸福在手中，莫贪！！！！！
12-06 470
参考资料： 1、vue2源码学习开胃菜——snabbdom源码学习（二） 2、vue2源码学习开胃菜——snabbdom源码学习（一） 3、Vue 原理解读系列（一） 之 Virtual DOM and Diff 1、Snabbdom 简介 Snabbdom 非常地简洁，其核心代码只有大约 200 行，并且支持可扩展性良好，它拥有一个模块化的结构，允许自定模块，而为了保持核心部分的简洁，...
怎么写dom代码的过程
weixin_40945354的博客
03-26 228
写的错的代码： <!DocType> <html> <div> <button :click = "ddd" type="text">display button</button> alert('hamimelon!') </div> </html> 一步步修改的代码 第二次思考 <!DocType> <html> <body>
JavaScript课程.pdf
最新发布
09-18
- 案例展示了JavaScript的实际应用，比如改变文本内容、切换图片源以及表单验证。 2. **JavaScript历史** - JavaScript 的起源可以追溯到1995年，当时NetScape公司开发的LiveScript，随后被Sun公司专家修改为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值