A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 学习交流 › 技术交流 › Java技术交流 › 正文

[学习交流] [石家庄校区]开关灯案例/事件/延迟

© Vosk 初级黑马   /  2019-2-21 16:20  /  673 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 2019-2-21 17:12 编辑

基础阶段_异常汇总Java编程基础异常一
  
创建人
  		  
贝塔βSeven
  
  
问题标题
  		  
day10_javaScript高级
  
  
问题分类
  		  
JavaScript高级
  
  
一级话题
  		  
开关灯案例/鼠标滑动事件/
  
  
问题补充
  		  
需求: 如何在鼠标滑动开启灯泡，鼠标滑过后关闭（即时）
  
  
附件
  		  
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <table>
      <script>
  
          window.onload = function() {
                  var table = document.getElementsByTagName("table")[0];
  
                  var text1 = "";
                  for (var j = 0; j < 5; j++) {
                      text1 += "<td>\n" +
                          "            <img src=\"./image/off.gif\" name=\"light1\" >\n" +
                          "        </td>";
                  }
                  var text2 = "";
                  for (var i = 0; i < 3; i++) {
                      text2 += ("<tr>\n" + text1 + "</tr>");
                  }
                  table.innerHTML +=  text2;
                  var tds = document.getElementsByTagName("img");
                  for (var i = 0;i<tds.length;i++){
                      tds.onmouseover=function () {
                          this.src="image/on.gif";
                      }
                      tds.onmouseout=function () {
                          this.src="image/off.gif";
                      }
                  }
              }
              </script>
  </table>
  </body>
  </html>
  
  
  
  
  
   
  
  
问题答案
  		  
问题分析:
  
建立<table>之后
  
首先我们获取内容为空的var类型的text1，将默认状态为关闭的灯泡传参到一个单元格内也就是text1，其次获取内容为空var类型的text2来作为行，设置行有几个单元格并将text1放进行中的单元格内，最后由table.innerHTML获取每行的内容，从而完成一个表格的建立；
  
建立一个数组通过doucument.getElementsByTagName来获取image的属性，通过遍历这个数组，设置鼠标滑动事件和鼠标移开事件，在事件发生后更换触发事件的图片路径从而完成开关灯的交替效果。
  
  
问题解决方法：
  
自己做不出来，问的凯歌   ;-)  /P
   
  



  
创建人
  		  
贝塔βSeven
  
  
问题标题
  		  
day10_javaScript高级
  
  
问题分类
  		  
JavaScript高级
  
  
一级话题
  		  
开关灯案例/鼠标滑动事件/延迟效果
  
  
问题补充
  		  
需求:在鼠标滑动至灯泡时 灯泡变亮，划过时延迟2秒灯泡灭掉
  
  
附件
  		  
  
<!DOCTYPE  html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <table>
      <script>
          window.onload = function() {
              var table = document.getElementsByTagName("table")[0];
  
              var text1 = "";
              for(var i =1;i<12;i++){
                  text1 +="<td>\n"+
                          "<img src=\"image/off.gif\" name = \"light\"> \n"+
                          " </td>";
              }
              var text2 = "";
              for(var i =0;i<4;i++){
                  text2+=("<tr>\n"+text1+"</tr>")
              }
              table.innerHTML+=text2;
  
  
              var imgs = document.getElementsByTagName("img");
              for(var j =0;i<imgs.length;j++){
  
                  imgs[j].onmouseout=function () {
                      var temp = this;
                      setTimeout(function () {temp.src="image/off.gif"; },3000);}
                  imgs[j].onmouseover=function() {
                      this.src="image/on.gif";
                  }
              }
  
          }
      </script>
  </table>
  </body>
  </html>
  
  
  
  
  
  
问题答案
  		  
问题分析:
  
1.        Settimeout时如果调用有参函数将立即执行函数内的参数内容，不会获取毫秒值。
  
2.        如果调用function方法会获取毫秒值，但是不会更改图片，
  
  
  
问题解决方法：
  
可以由此延申到很多前端页面的效果，创造更好的用户在页面内的交互体验，虽然现在的课程是以后台为主，想法比实力更重要;
  
  







off.gif (944 Bytes, 下载次数: 25)

关灯off

关灯off

on.gif (1.08 KB, 下载次数: 13)

开灯on

开灯on
CSSJS高级事件

3 个回复

倒序浏览
凉笙墨染 初级黑马 2019-2-21 16:30:08
| 只看该作者
沙发
回复 使用道具 举报
Vosk 初级黑马 2019-2-21 16:41:50
| 只看该作者
藤椅
凉笙墨染 发表于 2019-2-21 16:30

回复 使用道具 举报
一个人一座城0.0 来自手机 中级黑马 2019-2-23 19:18:20
| 只看该作者
板凳
看一看。
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马