js-dom操作

• js实现中文时钟

var arr=['零','一','二','三','四','五','六','七','八','九','十'];
        function getNum(num){
            if(num>0&&num<10){
                return arr[0]+arr[num];
            }
            if(num===10){
                return "十";
            }
            if(num>=20&&num<60&&num%10===0){
                return arr[num/10]+"十";
            }
            if(num>10&&num<20){
                return "十"+arr[num%10];
            } 
            return arr[parseInt(num/10)]+"十"+arr[num%10];
        }

        function getYear(year){
            year=year.toString();
            var str="";
            for(var i=0;i<year.length;i++){
                str+=arr[year[i]];
            }
            return str;
        }

        function clock(){
        var date=new Date();
        var year=date.getFullYear();
        var month=date.getMonth();
        var day=date.getDate();
        var hour=date.getHours();
        var minute=date.getMinutes();
        var second=date.getSeconds();
        document.body.innerHTML = "当前的时间为"+getYear(year)+"年"+getNum((month+1))+"月"+ getNum(day) + "日" + getNum(hour) +"时"+ getNum(minute)+"分" + getNum(second)+"秒";
    }
        clock();
        setInterval(clock,1000);

• 浏览器事件:语法都是对象.事件=function()
  • window.onload:等到页面文档和资源加载完毕之后执行,并不是立刻执行
  • onresize : 在浏览器被重置的时候会触发该事件
  • onscroll ： 当页面滚动的时候会触发 ，浏览器必须能够滚动
  • 滚动时候页面被卷掉的距离

          window.onscroll = function () {

            // 获取被卷掉的高度

          console.log(  document.documentElement.scrollTop );  // 有文档声明 

          console.log(document.body.scrollTop) //没有文档声明 

        }

         Chrome 和 火狐浏览器 

         一、如果有文档声明 那么我们通过 document.documentElement来获取;

         二、如果没有文档声明 那么我们通过document.body来获取

         IE  ： 1.如果没有文档声明 两个都可以   

         2. 如果有文档声明  那么document.documentElement起作用 ，document.body不起作用

         safari ： window.pageYoffset 来获取

• 几个弹框

  • 弹框 alert
  • prompt : 会弹出一个输入框 ，如果点击了确定就是输入框里的内容，如果点击了取消就得到一个null的返还
  • confirm 询问框 ,返还值：如果点击了确定 就返还true ，如果点击了取消就返还false

• 倒计时定时器: 执行一段时间之后执行某一段代码 ，单位是毫秒

    setTimeout(() => {
            
        }, timeout);

• 间隔定时器： 指定一段时间 循环执行一段代码

     setInterval(() => {
            
        }, interval);

• 停止定时器clearInterval,clearTimeout,返还值是一个数字，可以互相使用，所有定时器的代码一定会滞后于js代码
• 定时器里的this问题 : 在定时器里 如果不是箭头语法 ，那么 它的this是指向 window

    var obj = {
            name: "老王",
            fn: function () {
                console.log("1",this);
                // 通过一个变量来保存外部this值 
                var that = this;
                setTimeout(function () {
                    // console.log("2",obj.name);
                    console.log("2",that.name);
                    // 打印 obj里的name 怎么办？？
                    
                }, 2000);
            }
        }
        obj.fn();

• 循环生成表格

var trStr = "";
    for (var i = 0; i < 3; i++) {
        // 通过循环来生成td的字符串
        var tdStr = "";
        for (var j = 0; j < 3; j++) {
            tdStr += "<td>td里内容</td>";
        }
        console.log(tdStr);  // 三个td连接在一起的字符串
        if (i % 2 == 0) {
            // 索引是偶数 ，table的行数是奇数
            trStr += "<tr style='background:blue'>" +
                tdStr +
                "</tr>";
        } else {
            // 索引是奇数的是不是也要生成
            trStr += "<tr>" +
                tdStr +
                "</tr>";
        }
    }

• 创建dom元素：document.createElement(标签)
• 将dom元素添加到页面中document.body.appendChild(对象)
• document.querySelector，document.querySelectorAll将标签元素获取
• 图片切换案例

        <button>按钮一</button><button>按钮二</button><button>按钮三</button>
        <img src="./imgs/1.jpg" />
        解决方案一
         for(var i=0;i<btns.length;i++){
            // 如果要打印详细信息 可以用console.dir
             // 每一个按钮
            btns[i].index = i;
            // btns[i].test = "测试数据";
            // console.dir(btns[i]);
            btns[i].onclick = function(){
                // console.log("点击了按钮",i);
                // console.log(this.index); // this 是不是就是事件源--->btns[i]
                imgEle.src = "./imgs/"+(this.index+1)+".jpg";
            }
        }
        解决方案二
        for (var i = 0; i < btns.length; i++) {
            (function (i) { // 形参  // 每次循环的时候 把i保存在了 函数作用域里面
                btns[i].onclick = function () {
                    console.log(i);
                    // imgEle.src = "./imgs/"+(this.index+1)+".jpg";
                }
            })(i)  // 实参
        }
        解决方案三
         for(let i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                console.log(i);
                // imgEle.src = "./imgs/"+(this.index+1)+".jpg";
            }
        }
        解决方案四
        Array.from(btns).forEach(function (item, key) {
            item.onclick = function () {
                // console.log(key);
                imgEle.src = "./imgs/" + (key + 1) + ".jpg";
            }
        })

• 切换div案例

    <button style="background: red;">按钮一</button>
    <button>按钮二</button>
    <button >按钮三</button>
    <div>div1</div>
    <div style="display: none;">div2</div>
    <div style="display: none;">div3</div>
    <script>
        // 1.去掉其他的所有样式 （干掉其他人）   2.点击当前元素 显示当前元素内容  
        // 点击按钮显示背景颜色 
        var btns = document.querySelectorAll("button");
        // 获取所有的div
        var divs = document.querySelectorAll("div");
        for(let i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                // 处理按钮的点击效果
                // 设置当前点击元素样式之前 必须得干掉其他人；
                btns.forEach(function(item){
                    // console.log(item);
                    // item ： 每一个 button标签，每一个标签的背景颜色都去掉
                    item.style.backgroundColor = "";
                })
                // 点击之后获取当前元素
                // console.log(this);
                // 把当前点击的按钮设置成红色 ；
                this.style.backgroundColor = "red";

                // 切换div:如何切换div？？
                console.log(i);  //点击了哪个按钮的索引

                // 显示之前干掉所有的其他div（隐藏所有的其他div）;
                divs.forEach(function(item){
                    item.style.display = "none";
                })

                // 点击按钮索引对应的div索引显示出来
                divs[i].style.display = "block";
            }
        }