JavaScriptDOM事件 -- 笔记 - 图2review0522

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .btn, .lock{
  8.             width: 140px;
  9.             height: 30px;
  10.             line-height: 30px;
  11.             background: #00f;
  12.             color: #fff;
  13.             font-size: 14px;
  14.             text-align: center;
  15.             border-radius: 5px;
  16.             cursor: pointer;
  17.             margin-top: 30px;
  18.         }
  19.         .unlock{
  20.             width: 140px;
  21.             height: 30px;
  22.             line-height: 30px;
  23.             background: #666;
  24.             color: #ccc;
  25.             font-size: 14px;
  26.             text-align: center;
  27.             border-radius: 5px;
  28.             cursor: pointer;
  29.             margin-top: 30px;
  30.         }
  31.     </style>
  32. </head>
  33. <body onload="ymd(), initLogo()">
  34.     <form>
  35.         <select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
  36.         <select name="mm" id="mm" onchange="selectYmd()"></select>月
  37.         <select name="dd" id="dd"></select>日
  38.         <input type="button" value="删除列表框条目" onclick="deleteSelect()" name=""><hr>
  40.         <img id="logoImg" src="headLogo/1.gif">
  41.         <select id="logo" onchange="selectLogo()"></select><hr>
  43.         <input type="checkbox" name="interest" value="1"><label>游泳</label>
  44.         <input type="checkbox" name="interest" value="2"><label>爬山</label>
  45.         <input type="checkbox" name="interest" value="3"><label>看书</label>
  46.         <input type="checkbox" name="interest" value="4"><label>听歌</label>
  47.         <input type="button" value="全选" id="btn1" onclick="checkInterest()" name="">
  48.         <input type="button" value="反选" onclick="checkInterest2()" name=""><hr>
  50.         <input type="button" value="弹出" onclick="alert('我是按钮')" name=""><hr>
  52.         <div id="btn" class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#00f')">开始</div><hr>
  53.     </form>
  55.     <div class="lock" id="btn2">锁定</div><hr>
  56.     <div id="box">这是一个DIV</div>
  57. </body>
  58. <script type="text/javascript">
  59.     function ymd(){
  60.         var yyyy = document.getElementById('yyyy');
  61.         var mm = document.getElementById('mm');
  62.         var dd = document.getElementById('dd');
  64.         var date = new Date();
  65.         var year = parseInt(date.getFullYear());
  66.         initSelect(yyyy,1990,year);
  67.         initSelect(mm,1,12);
  68.         initSelect(dd,1,31);
  70.         var n = yyyy.length;//先获取列表框的长度
  71.         yyyy.selectedIndex = Math.round(n/2);//列表框选中某个条目
  72.     }
  74.     function initSelect(obj,start,end){
  75.         for (var i=start;i<=end;i++){
  76.             obj.options.add(new Option(i,i));
  77.         }
  78.     }
  80.     function selectYmd(){
  81.         var mm = document.getElementById('mm');
  82.         var dd = document.getElementById('dd');
  83.         var m = parseInt(mm.value);
  84.         var dayEnd;
  85.         if (m==4 || m==6 || m==9 || m==11){
  86.             dayEnd = 30;
  87.         } else if (m==2){
  88.             //处理闰年：1、能被4整除且不能被100整除
  89.             //           2、能被400整除
  90.             y = parseInt(yyyy.value);
  91.             if ((y%4==0 && y%100!=0) || y%400==0){
  92.                 dayEnd = 29;
  93.             } else {
  94.                 dayEnd = 28;
  95.             }
  96.         } else {
  97.             dayEnd = 31;
  98.         }
  99.         dd.options.length = 0;//将某个列表框的条目数设置为0
  100.         initSelect(dd,1,dayEnd);
  101.     }
  103.     function deleteSelect(){
  104.         var dd = document.getElementById('dd');
  105.         //删除列表框的每一个条目 倒着删除(正向删除存在索引问题)
  106.         for (i=dd.length;i>=0;i--){
  107.             dd.options.remove(0);
  108.         }
  109.     }
  111.     function initLogo(){
  112.         var logo = document.getElementById('logo');
  113.         for (var i=1;i<=15;i++){
  114.             logo.options.add(new Option(i,i));
  115.         }
  116.     }
  118.     function selectLogo(){
  119.         var logo = document.getElementById('logo');
  120.         var n = logo.value;
  121.         var logoImg = document.getElementById('logoImg');
  122.         logoImg.src = 'headLogo/' + n + '.gif';
  123.     }
  125.     var flag = true;
  126.     function checkInterest(){
  127.         var interest = document.getElementsByName('interest');
  128.         for (var i=0;i<interest.length;i++){
  129.             interest[i].checked = flag;
  130.         }
  131.         if (flag){
  132.             document.getElementById('btn1').value = '全不选';
  133.         } else {
  134.             document.getElementById('btn1').value = '全选';
  135.         }
  136.         flag = !flag;//开关变量
  137.     }
  139.     function checkInterest2(){
  140.         var interest = document.getElementsByName('interest');
  141.         for (var i=0;i<interest.length;i++){
  142.             interest[i].checked = !interest[i].checked;
  143.             console.log(interest[i].value);
  144.         }
  145.     }
  147.     //鼠标滑过时，按钮的背景发生改变
  148.     //this是对于对象的引用，也就是这个时间绑在什么DOM元素上，这个this就代表谁
  149.     function mouseoverFn(btn,bgColor){
  150.         console.log(btn);
  151.         btn.style.background = bgColor;
  152.     }
  153.     function mouseoutFn(btn,bgColor){
  154.         console.log(btn);
  155.         btn.style.background = bgColor;
  156.     }
  158.     var btn2 = document.getElementById('btn2');
  159.     btn2.onclick = function(){
  160.         //判断是否锁定 改变颜色
  161.         if (this.className == 'lock'){
  162.             this.className = 'unlock';
  163.             this.innerHTML = '解锁';
  164.         } else {
  165.             this.className = 'lock';
  166.             this.innerHTML = '锁定';
  167.         }
  168.     }
  170.     var box = document.getElementById('box');
  171.     var clicked = function(){
  172.         alert('1111');
  173.     };
  174.     box.onclick = clicked;//主要调用函数千万不能加括号 
  175.     // btn.onclick = clickBtn(); 这是错误的 相当于直接调用
  176. </script>
  177. </html>

review0525-1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM基础2</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 50px;
            background-color: pink;
        }

        .box{
            padding: 30px;
        }
        .left,.tip{
            float: left;
        }
        .left{
            margin-right: 10px;
        }
        .tip{
            display: none;
        }

        #box2{
            width: 200px;
            height: 200px;
            background: #f00;
        }

        .text span{
            font-weight: bold;
            color: #f00;
        }
        em{
            font-size: normal;
        }
    </style>
    <script type="text/javascript">
        //页面加载完成时 执行如下操作
        //将JavaScript写在上面的时候 需要用到window.load
        window.onload = function(){
            //获取box
            var box = document.getElementById("box");
            var clicked = function(){
                alert('我被点击了！');
            };
            box.onclick = clicked;

            //获取文本框和提示框
            var phone = document.getElementById('phone'),
                tip = document.getElementById('tip');
            //给文本框绑定激活的事件
            phone.onfocus = function(){
                //让tip显示出来
                tip.style.display = 'block';
            }
            //给文本框绑定失去焦点的事件
            phone.onblur = function(){
                //获取文本框的值
                var phoneNum = this.value;
                //判断手机号码是否为11位的数字
                if (phoneNum.length == 0) {
                    tip.style.display = 'none';
                } else if (phoneNum.length==11 && isNaN(phoneNum)==false) {
                    tip.innerHTML = '<img src="img/right.png">';
                } else {
                    tip.innerHTML = '<img src="img/error.png">';
                }
            }

            //获取下拉菜单
            var menu = document.getElementById('menu');
            //给菜单绑定change事件
            menu.onchange = function(){
                //获取当前选中的值
                var bgcolor = this.value;
                //下拉菜单选中的值
                var bgcolor = menu.options[menu.selectedIndex].value;
                //如果bgcolor为空的话，则下面的脚本不执行
                if (bgcolor == '') {
                    document.body.style.background = '#fff';
                } else {
                    //设置body的背景色
                    document.body.style.background = bgcolor;
                }
            }

            var box2 = document.getElementById('box2');
            //绑定按下的事件
            box2.onmousedown = function(){
                console.log('我被按下了');
            }
            box2.onmousemove = function(){
                console.log('我被移动了');
            }
            box2.onmouseup = function(){
                console.log('我被松开了');
            }
            box2.onclick = function(){
                console.log('我被点击了');
            }
            //浏览器窗口尺寸改变
            window.onresize = function(){
                console.log('我的尺寸被改变了');
            }
            window.onscroll = function(){
                console.log('我被拖动了');
            }

            //在事件触发的function里面，用一个参数接收事件对象
            document.onkeydown = function(event){
                //event代表事件的状态，比如触发event对象的元素、鼠标的位置等状态
                console.log(event.keyCode);
            }

            //获取文本框
            var text = document.getElementById('text');
            var total = 30;
            var count = document.getElementById('count');
            //绑定键盘事件
            document.onkeyup = function(){
                //获取文本框长度
                var len = text.value.length;
                var allow = total - len;
                count.innerHTML = allow;
            }

            var btn = document.getElementById('btn');
            btn.onclick = function(){
                //example获取的是一个数组
                var x = document.getElementsByClassName('example');
                if (btn.value == '点我') {
                    x[0].innerHTML = 'hello div1';
                    x[1].innerHTML = 'hello div2';
                    x[2].innerHTML = 'hello div3';
                    btn.value = '返回';
                } else {
                    x[0].innerHTML = '第一个div元素class为example';
                    x[1].innerHTML = '第二个div元素class为example';
                    x[2].innerHTML = '第三个div元素class为example';
                    btn.value = '点我';
                }
            }
        }
    </script>
</head>
<body>
    <div id="box">我被点击了！</div><hr>

    <div class="box">
        <div class="left">
            <input type="text" id="phone" placeholder="请输入手机号码" name="">
        </div>
        <div class="tip" id="tip">
            请输入有效的手机号码
        </div>
    </div><hr>

    <div class="box2">
        请选择您喜欢的背景颜色
        <select id="menu">
            <option value="">请选择</option>
            <option value="#f00">红色</option>
            <option value="#0f0">绿色</option>
            <option value="#00f">蓝色</option>
            <option value="#ff0">黄色</option>
            <option value="#ccc">灰色</option>
        </select>
    </div><hr>

    <div id="box2">拖动</div><hr>

    <div>
        <p class="text">您还可以输入<span><em id="count">30</em>/30</span>个字</p>
        <div class="input">
            <textarea id="text" cols="50" rows="4"></textarea>
        </div>
    </div><hr>

    <div class="example">第一个div元素class为example</div>
    <div class="example">第二个div元素class为example</div>
    <div class="example">第三个div元素class为example</div>
    <input type="button" id="btn" value="点我"><hr>

    <input type="checkbox" name="interest" onchange="count()" value="1"><label>游泳</label>
    <input type="checkbox" name="interest" onchange="count()" value="2"><label>爬山</label>
    <input type="checkbox" name="interest" onchange="count()" value="3"><label>看书</label>
    <input type="checkbox" name="interest" onchange="count()" value="4"><label>听歌</label>
    <input type="button" value="全选" id="btn1" onclick="checkInterest(),count()" name="">
    <input type="button" value="反选" onclick="checkInterest2(),count()" name=""><hr>
</body>
<script type="text/javascript">
    var interest = document.getElementsByName('interest');
    function checkInterest(){
        if (document.getElementById('btn1').value == '全不选'){
            for (var i=0;i<interest.length;i++){
            interest[i].checked = false;
            }
            document.getElementById('btn1').value = '全选';
        } else {
            for (var i=0;i<interest.length;i++){
            interest[i].checked = true;
            }
            document.getElementById('btn1').value = '全不选';
        }
    }

    function checkInterest2(){
        for (var i=0;i<interest.length;i++){
            interest[i].checked = !interest[i].checked;
        }
    }

    function count(){
        var counter = 0;
        for (var i=0;i<interest.length;i++){
            if (interest[i].checked){
                counter++;
            }
        }
        if (counter == interest.length){
            document.getElementById('btn1').value = '全不选';
        } else {
            document.getElementById('btn1').value = '全选';
        }
    }
</script>
</html>