美文网首页
2018-08-21 day07 js事件

2018-08-21 day07 js事件

作者: Kris_Shin | 来源:发表于2018-08-21 17:12 被阅读0次
    1. 添加事件

      • 添加事件方式,见代码
      • 显示隐藏图片
        • 操作div的display属性,在block和none之间切换即可
      • this使用
        • 在匿名函数中的this就是当前对象
        • 在onclick=demo(this) 就是当前节点
        • 修改内容
        • this.innerHTML = 'xxx'
      • 切换背景色
      • 表单内容控制
        // clear是关键字,不能使用函数名
        function cleara(obj) {
            // console.log('clear')
            if (obj.value == "请输入用户名") {
                obj.value = ''
            }
        }
        function recover(obj) {
            if (obj.value == '') {
                obj.value = '请输入用户名'
            }
        }
        var oinput = document.getElementById('ip')
        oinput.onfocus = function () {
            // 判断要不要清空
            if (this.value == "请输入用户名") {
                this.value = ''
            }
        }
        oinput.onblur = function () {
            // 判断内容是不是为空,如果为空变成下面这个
            if (this.value == '') {
                this.value = '请输入用户名'
            }
        }
        
    2. onload函数

      • window的事件,windows.onload = function () {} 是在整个文档加载完毕之后执行,但是自己写的onclick的点击函数不能写到onload里面,因为内部函数只能在内部使用,不能再外部使用
      • 如果实在是想用
          window.lala = function () {}
      
    3. 选项卡

      • 方式一
      <body>
      <button class="active" onclick="dudu(this, 0)">周杰伦</button>
      <button onclick="dudu(this, 1)">王力宏</button>
      <button onclick="dudu(this, 2)">张学友</button>
      <button onclick="dudu(this, 3)">刘德华</button>
      <div class="show">菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱</div>
      <div>花田错、龙的传人、唯一</div>
      <div>慢慢、吻别、一千个伤心的理由</div>
      <div>谢谢你的爱、冰雨、天意、忘情水</div>
      </body>
      </html>
      <script>
          // 得到所有的button
          var abuttons = document.getElementsByTagName('button')
          // 得到所有的div
          var adivs = document.getElementsByTagName('div')
          function dudu(obj, index) {
              // 先将所有的button的class属性设置为空
              for (var i = 0; i < abuttons.length; i++) {
                  abuttons[i].className = ''
                  adivs[i].className = ''
              }
              // 给指定的button添加样式
              obj.className = 'active'
              // 给指定的div添加样式
              adivs[index].className = 'show'
          }
      </script>
      
      • 方式二
      // 得到所有的button
      var abuttons = document.getElementsByTagName('button')
      var adivs = document.getElementsByTagName('div')
      // 循环button数组,给里面每一个button添加点击事件
      for (var i = 0; i < abuttons.length; i++) {
          // 给指定的button手动添加一个属性,用来保存是第几个button
          abuttons[i].index = i
          abuttons[i].onclick = function () {
              // 首先清掉所有button和div上面的class
              for (var j = 0; j < abuttons.length; j++) {
                  abuttons[j].className = ''
                  adivs[j].className = ''
              }
              // 给指定的button添加样式
              this.className = 'active'
              // console.log(i)
              // 给指定的div添加样式
              adivs[this.index].className = 'show'
          }
      }
      
    4. 定时器

      • 定时器:分为两种,一种是周期性定时器,一种是一次性定时器 setTimeOut()
      • 周期性:每隔5s执行一次函数 setInterval
      • 一次性:几秒之后执行一次函数,执行完毕定时器结束
        var timer = setTimeout(fn, 5000)
        5000ms之后执行fn一次。然后结束
        销毁定时器   clearTimeout(timer)
        
      • 计数器
      • 图片消失
    5. 获取非行内样式

      • IE浏览器获取非行内样式方式
        obj.currentStyle['name']
        
      • 火狐和谷歌获取方式
        getComputedStyle(odiv, null)['width']
        

      获取非行内样式的兼容性写法

      function getStyle(obj, name) {
          return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
      }
      
    6. BOM操作

      • window.setTimeout,window.setInterval
      • window.alert\window.confirm
      • window.open
      • window.history(back. go)
        • history.go(1) 去往前一个网址
        • history.go(2) 去往后一个网址
        • history.back() 倒退一个网址
      • location
        • href : 读取得到当前的url,设置跳转到指定的url
        • reload() : 刷新整个页面


          (还没有讲)
    7. DOM操作

      • children

      • parentNode

      • firstElementChild

      • lastElementChild

      • previousElementSibling

      • nextElementSibling

      • firstChild

      • lastChild

      • previousSibling

      • nextSibling

      • tagName

      • createElement

      • removeChild

      • appendChild

      • insertBefore

      • setAttribute

      • getAttribute

    8. select下拉框和oninput事件

      • onchange : 事件,用户点击下拉框触发

      • selectedIndex : 用户点击的option的下标,下标从0开始

      • options : osel.options 可以得到所有的option对象,这是一个数组

      • input框的oninput事件,只要内容改变,就会触发

    作业

    case.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>Case</title>
    </head>
    
    <body>
        <div>
            1. 进度条:<br>
            <progress id="pg1" value="0" max="100"></progress>
            <span id="a1"> 0%</span><button onclick="case1()">Start</button>
        </div>
        <div>
            2. 时钟:<br>
            <span id="a2">00:00:00</span>
            <button onclick="case2_1()">开始</button>
            <button onclick="case2_2()">暂停</button>
            <button onclick="case2_3()">重置</button>
        </div>
        <div>
            3.文字时钟<br>
            <span id="a3" onmousemove="case3_1()" onmouseout="case3_2()">当前时间:</span>
        </div>
        <div>
            4.
        </div>
        <div>
            5.短信<br>
            <input type="button" value="发送短信" id="5" onclick="case5()">
        </div>
    </body>
    <script>
        function case1() {
            var pg1 = document.getElementsByTagName('progress')[0]
            var i = 0
            var t = setInterval(function () {
                if (i == 100) {
                    clearInterval(t)
                }
                pg1.value = i;
                document.getElementById('a1').innerHTML = '' + i + '%';
                i++;
            }, 40)
        }
    
        var h = 0
        var m = 0
        var s = 0
        var t = null
        function case2_1() {
            t = setInterval(function () {
                s++
                if (s < 10) {
                    s1 = '0' + s
                } else { s1 = s }
                if (m < 10) {
                    m1 = '0' + m
                } else { m1 = m }
                if (h < 10) {
                    h1 = '0' + h
                } else { h1 = h }
                if (s == 60) {
                    s = 0;
                    m++;
                    if (m == 60) {
                        m = 0;
                        h++
                        if (h == 24) {
                            h = 0
                        }
                    }
                }
                time = ''
                time = h1 + ':' + m1 + ':' + s1;
                document.getElementById('a2').innerHTML = time
            }, 1)
        }
        function case2_2() {
            clearInterval(t)
        }
        function case2_3() {
            s = 0;
            m = 0;
            h = 0;
            document.getElementById('a2').innerHTML = '00:00:00'
        }
    
        var tt = null
        function case3_1() {
            tt = setInterval(function () {
                var datetime = new Date()
                var year = datetime.getFullYear()
                var month = datetime.getMonth() + 1
                var date = datetime.getDate()
                var weekday = datetime.getDay() + 1
                var hrs = datetime.getHours()
                var min = datetime.getMinutes()
                var sec = datetime.getSeconds()
                document.getElementById('a3').innerHTML = '当前时间:' + year + '年' + month + '月' + date + '日' + ' 星期' + weekday + ' ' + hrs + ':' + min + ':' + sec
            }, 1000)
        }
        function case3_2() {
            clearInterval(tt)
        }
    
        function case5() {
            var i = 60;
            var ttt = setInterval(function () {
                if (i >= 0) {
                    btn = document.getElementById('5');
                    btn.disabled = 'disabled';
                    btn.value = '再次发送(' + i + 's)';
                    i--;
                } else if (i < 0) {
                    btn.value = '点击发送';
                    btn.disabled = "";
                    clearInterval(ttt);
                }
            }, 10)
        }
    </script>
    
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:2018-08-21 day07 js事件

          本文链接:https://www.haomeiwen.com/subject/cpmjiftx.html