目录

input框动态显示事件

  1.  <head>
  2.      <meta charset="UTF-8">
  3.      <title>动态显示时间</title>
  4.      <style>
  5.          input{width:200px;}
  6.      </style>
  7.   </head>
  8.   <body>
  9.   <input type="text" id="time">
  10.   <button id="switch">开始</button>
  11.   </body>
  12.   ​
  13.   <script>
  14.      var btn = document.getElementById('switch');
  15.      btn.onclick = function () {
  16.          switch (this.innerText) {
  17.              case '开始':
  18.                  this.innerText = '停止';
  19.                  timer1 = setInterval(update,1000);
  20.                  break;
  21.              case '停止':
  22.                  this.innerText = '开始';
  23.                  clearInterval(timer1);
  24.                  break;
  25.          }
  26.      };
  27.      function update() {
  28.          var t = document.getElementById('time');
  29.          var dt = new Date();
  30.          t.value = dt.toLocaleString();
  31.      }
  32.   </script>

input框动态显示事件

红绿灯

  1.  <head>
  2.      <meta charset="UTF-8">
  3.      <title>事件-红绿灯</title>
  4.      <style>
  5.          .fa{display: inline-block; padding: 5px;border-radius: 10px;border-color: darkgray;border-style: solid}
  6.          .div0{width:100px;height:100px;border-radius: 50px; float: left;
  7.              border-color: white;background-color: gray;
  8.              display: inline-block;margin: 0;}
  9.          .div2{background-color: green;}
  10.          .div1{background-color: red;}
  11.          .div3{background-color: yellow;}
  12.      </style>
  13.   </head>
  14.   <body>
  15.   <div class="fa">
  16.      <div id="d0" class="div0 div1"></div>
  17.      <div id="d1" class="div0"></div>
  18.      <div id="d2" class="div0"></div>
  19.   </div>
  20.   ​
  21.   <script>
  22.   ​
  23.      function change()
  24.      {
  25.          var tem = document.getElementsByClassName('div0');
  26.          if (tem[0].classList.contains('div1'))
  27.          {
  28.              tem[0].classList.remove('div1');
  29.              tem[1].classList.add('div2');
  30.          }
  31.          else if (tem[1].classList.contains('div2'))
  32.          {
  33.              tem[1].classList.remove('div2');
  34.              tem[2].classList.add('div3');
  35.          }
  36.          else if (tem[2].classList.contains('div3'))
  37.          {
  38.              tem[2].classList.remove('div3');
  39.              tem[0].classList.add('div1');
  40.          }
  41.   ​
  42.      }
  43.      setInterval(change,1000);
  44.   ​
  45.   </script>
  46.   </body>

红绿灯模拟

顶部广告栏关闭

  1.  <head>
  2.      <meta charset="UTF-8">
  3.      <title>顶部广告关闭</title>
  4.      <style>
  5.          body{margin:0 ;}
  6.          .ad{  position:fixed ; top:0; width: 100%; height: 100px;
  7.              background-color: darkblue;opacity: 0.5}
  8.          .ad_content{position: fixed;top:0; padding:20px;color: #53ff09}
  9.          #close{position: fixed;top: 0; right: 0; background-color: lightyellow;
  10.                  height: 20px;width:20px;text-align:center; line-height: 20px;font-size:30px}
  11.          .content{height: 1000px;background-color: gray}
  12.      </style>
  13.   </head>
  14.   <body>
  15.      <div class="ad" id="ad">
  16.          <div class="ad_content">
  17.          LOL新赛季即将开启，敬请期待
  18.          </div>
  19.          <div id="close">
  20.              x
  21.          </div>
  22.      </div>
  23.   ​
  24.      <div class="content">
  25.          详情请关注LOL世界锦标赛官方微博
  26.          详情请关注LOL世界锦标赛官方微博
  27.          详情请关注LOL世界锦标赛官方微博
  28.          详情请关注LOL世界锦标赛官方微博
  29.          详情请关注LOL世界锦标赛官方微博
  30.          详情请关注LOL世界锦标赛官方微博
  31.          详情请关注LOL世界锦标赛官方微博
  32.          详情请关注LOL世界锦标赛官方微博
  33.          详情请关注LOL世界锦标赛官方微博
  34.          详情请关注LOL世界锦标赛官方微博
  35.          详情请关注LOL世界锦标赛官方微博
  36.          详情请关注LOL世界锦标赛官方微博
  37.      </div>
  38.   </body>
  39.   <script>
  40.      var closebtn = document.getElementById('close');
  41.      closebtn.onclick = function () {
  42.          var ad= document.getElementById('ad');
  43.          ad.style.display = 'none';
  44.      }
  45.   </script>

顶部广告

鼠标悬停IMG上时，更换另一张图片

  1.  //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
  2.              //步骤：
  3.              //1.获取事件源
  4.              //2.绑定事件
  5.              //3.书写事件驱动程序
  6.  
  7.   <body>
  8.   <img src="1.jpg" id="box" style="cursor: pointer;border: 1px solid #ccc;" >
  9.   </body>
  10.   <script>
  11.      var img = document.getElementById('box');
  12.      img.onmouseover = function () {
  13.          img.src = '2.jpg';
  14.      };
  15.      img.onmouseout = function () {
  16.          img.src = '1.jpg'
  17.      };
  18.   </script>

鼠标悬停更换图片

悬浮框自动出现

  1.  <head>
  2.      <meta charset="UTF-8">
  3.      <title>自动出现</title>
  4.      <style>
  5.          .d1{width:70px; height:25px;background-color: #cccccc;position: fixed;
  6.              bottom: 50px;right: 50px;text-align: center;line-height: 25px;border-radius: 5px;}
  7.          .d2{display: none}
  8.          .a1{text-decoration: none; color: #ff6700}
  9.      </style>
  10.   </head>
  11.   <body>
  12.   <div style="width: 100% ; height: 2000px;background-color: gray"></div>
  13.   <div class="d1 d2" id="d1"><a class="a1" id="a1" href="#">回到顶部</a></div>
  14.   </body>
  15.   <script>
  16.   ​
  17.      var sl = document.getElementById('d1');
  18.          window.onscroll = function () {
  19.              console.log(document.documentElement.scrollTop);
  20.              if (document.documentElement.scrollTop>700){
  21.                  sl.classList.remove('d2');
  22.              }
  23.              else { sl.classList.add('d2'); }
  24.          };
  25.   ​
  26.   </script>
  27.   ​
  28.   // 行内实现
  29.   <body>
  30.   <div style="height: 4000px;width:20px;background-color: #ff6700"></div>
  31.   <p><a id="a1" style="position: fixed; bottom: 200px; z-index: 100; background-color: gray; right: 100px; color: white; display: block; padding: 5px; border-radius: 5px; text-decoration: none;" href="#">回到顶部</a></p>
  32.   ​
  33.   </body>
  34.   <script>
  35.          var ab= document.getElementById('a1');
  36.          window.onscroll = function () {
  37.              console.log(document.documentElement.scrollTop);
  38.              console.log(ab.style.display);
  39.              if (document.documentElement.scrollTop>700){
  40.                  ab.style.display = 'block';
  41.              }
  42.              else { ab.style.display = 'none'; }
  43.          };
  44.   </script>
  45.   </html>

悬浮框自动出现

模态框案例

需求：打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框。

  1.  <!DOCTYPE html>
  2.   <html lang="zh-ch">
  3.   <head>
  4.      <meta charset="UTF-8">
  5.      <title>模态框</title>
  6.      <style>
  7.          *{margin:0;padding :0;}
  8.          html,body{height: 100%;}
  9.          #box{width:100%;height:100%;background: rgba(0,0,0,.3);}
  10.          #content{position: relative;top:150px;width:400px;height: 200px;
  11.                    line-height: 200px;text-align: center;
  12.                    color: red; background-color: #fff;margin:auto; }
  13.          #span1{position:absolute;background-color: red;top: 0 ;right:0;width: 30px;
  14.                  height: 30px;text-align: center;color:#fff;line-height: 30px;}
  15.      </style>
  16.   </head>
  17.   <body>
  18.   <button id="btn">弹出</button>
  19.   </body>
  20.   <script type="text/javascript">
  21.      //获取dom元素：1获取事件源
  22.      var oBtn = document.getElementById('btn');
  23.      //创建弹出模态框的相关dom对象
  24.      var oDiv = document.createElement('div');
  25.      var oP = document.createElement('p');
  26.      var oSpan = document.createElement('span');
  27.   ​
  28.      //设置属性
  29.      oDiv.id = 'box';
  30.      oP.id = 'content';
  31.      oP.innerHTML='模态框弹出显示的内容';
  32.      oSpan.innerText = 'X';
  33.      oSpan.id = 'span1';
  34.   ​
  35.      //追加元素
  36.      oDiv.appendChild(oP);
  37.      oP.appendChild(oSpan);
  38.   ​
  39.      //设置点击弹窗按钮 弹出模态框
  40.      oBtn.onclick = function () {
  41.          this.parentNode.insertBefore(oDiv,oBtn);
  42.      };
  43.   ​
  44.      //设置关闭按钮，关闭模态框
  45.      oSpan.onclick = function () {
  46.          oDiv.parentNode.removeChild(oDiv)
  47.      }
  48.   </script>
  49.   </html>

模态框

回到顶部

DOM事件练习 I的更多相关文章

  1. DOM 事件深入浅出（二）

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  2. DOM 事件深入浅出（一）

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  3. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. 你真的了解DOM事件么？

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  6. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  7. dom事件与event对象总结

    1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间.    tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序.        事件 ...

  8. DOM事件简介－－摘自admin10000

    Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...

  9. 从click事件理解DOM事件流

    事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...

  10. DOM事件机制进一步理解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. ubuntu NAT dhcp

    说明: 1.在服务器版本中,没有想桌面版一样的NetworkManager工具,所以的一切都是在命令行上操作的. 2.本文只针对DHCP默认分配的IP进行查看. 方法: 1.如果要使用DHCP,那么需 ...

  2. @Value和@ConfigurationProperties

    1.@Value用法 https://blog.csdn.net/u010832551/article/details/73826914 2.@ConfigurationProperties用法 ht ...

  3. 什么是favicon.ico？

    ㈠定义 ⑴所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站. ⑵根据浏览器的不同,Favicon显示也有 ...

  4. EntityManager的merge()方法

    EntityManager的merge()方法相当于hibernate中session的saveOrUpdate()方法: 用于实体的插入和更新操作:

  5. jquery reset选择器 语法

    jquery reset选择器 语法 作用::reset 选择器选取类型为 reset 的 <button> 和 <input> 元素.直线电机滑台 语法:$(":r ...

  6. 洛谷 P1341 无序字母对(欧拉路)

    P1341 无序字母对 题目提供者yeszy 标签 福建省历届夏令营 难度 提高+/省选- 最新讨论 题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造 ...

  7. HGOI 20190830 题解

    Problem A 钥匙 有$n$个人和$m$个钥匙在数轴上,人的坐标为$a_i$,钥匙的坐标为$b_i$ 而门的坐标为$p$,要让所有人获得一把不同钥匙,并且到达门,最长时间最短是多少. 对于$10 ...

  8. nginx 入门实战

    nginx入门实战 nginx 安装与卸载 下载安装 进入 http://nginx.org/en/download.html 下载自己想要的版本,我选择的stable版本 tar -zxvf ngi ...

  9. fileReader对象读取txt文件乱码问题 以及如何获取文件的url路径（绝对路径）

    <input type="file" @change="aaa($event)"> <div id="hi">< ...

  10. Teamviewer解决许可证授权的问题

    提交商业用途表 https://www.teamviewer.com/zhCN/pricing/commercial-use/