zoukankan      html  css  js  c++  java
  • js基础第六天

    获取节点属性

    getAttribute(“属性”) 获取属性

    setAttribute(“属性”,”值”); 设置节点属性

    删除某个属性

    removeAttribute(“属性”)

    A.appendChild(B);

    B一定是A的孩子,同时b放到了a里面,装到里面去了,在最后面。

    A.insertBefore(B,C)

    B C都是A的孩子,把B放到A里面,但是在C的前面。

    微博案例

    第一个if 语句中,if里面如果有return,那么就是返回,不执行下面的,终止执行,就不拥有else了。如果没有return的话,那么还得有else。

    <style>
             ul{
                 list-style-type: none;}
             *{margin:0;padding: 0;}
             .box {
                 margin: 100px auto;
                 600px;
                 height: auto;
                 border:1px solid #333;
                 padding: 30px 0;
             }
             textarea {
                 450px;
                 resize: none;  /*防止用户拖动 右下角*/
             }
             .box li {
                 450px;
                 line-height: 30px;
                 border-bottom:1px dashed #ccc;
                 margin-left: 80px;
             }
             .box li a {
                 float: right;
             }
         </style>
         <script>
             window.onload = function(){
                 //获取对象   再次操作对象
                 var btn = document.getElementsByTagName("button")[0];
                 var txt = document.getElementsByTagName("textarea")[0];
                 var ul = document.createElement("ul");  // 创建ul
                 btn.parentNode.appendChild(ul);  // 追加到  他的父亲里面
                 btn.onclick = function(){
                     if(txt.value == "")
                     {
                         alert("输入不能为空");
                         return false;  // 终止函数执行
                     }
                     var newli = document.createElement("li");
                     newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>";  // 吧表单的值给  新li

                     txt.value = "";  // 清空 表单
                     var lis = ul.children;  // 获得有多少个li

                    //  if else  这个片段  让我们新发布的内容 最上显示
                     if(lis.length == 0)  //  第一次创建
                     {
                         ul.appendChild(newli); // ul 的后面追加
                     }
                     else
                     {
                         ul.insertBefore(newli,lis[0]);  // 每次生成的新的li 放到第一个li 的前面
                     }
                     var as = document.getElementsByTagName("a");  // 获得所 a
                     for(var i=0; i<as.length;i++)
                     {
                         as[i].onclick = function(){
                             //removeChild
                             ul.removeChild(this.parentNode);  // UL   他的爸爸

                             // a 的粑粑是 li

                         }
                     }

                 }
          }
         </script>
    </head>
    <body>
    <div class="box">
         微博发布: <textarea name="" id="" cols="30" rows="10"></textarea>  <button>发布</button>
    </div>
    </body>

    日期函数Date()

    所有日期函数首字母都要大写。

    这个函数(对象)可以设置我们本地日期,年月日时分秒。

    首先要声明日期:(创造声明一个新的日期函数)

    var date = new Date(); date是最新的日期变量

    拓展:var arr=new Array();这个是声明一个新的数组

    1秒=1000毫秒

    var date=new Date();

    date.getTime(); 得到距离1970年的毫秒数

    date.valueOf(); 得到距离1970年的毫秒数

    以上这两个值是一样的,这两种是常用的。

    Date.now()

    +new Date() 也是得到距离1970年的毫秒数,但是这两个与上面是有几毫秒之差。

    以上这两个值是一样的,可以直接使用。

    常用的日期函数的方法

    获取日期和时间

    getDate() 获取日 1-31

    getDay () 获取星期 0-6(这里要注意)

    getMonth () 获取月 0-11(这里要注意)

    getFullYear () 获取完整年份(浏览器都支持)

    getHours () 获取小时 0-23

    getMinutes () 获取分钟 0-59

    getSeconds () 获取秒 0-59

    getMilliseconds () 获取当前的毫秒

    getTime () 返回累计毫秒数(从1970/1/1午夜)

    日历案例

    <script>
         window.onload = function() {
             var box = document.getElementById("box");
             var boys = box.children;
             var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
             var date = new Date();
             boys[0].innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+" "+arr[date.getDay()];
             boys[1].innerHTML = date.getDate();
         }
    </script>

    定时器(共有2个,这是其中1个)

    每个几秒钟就去执行一次什么事件,例如轮播图。

    设定时间 让某个动作不断的去执行。这个我们在JS里面用定时器来表示。

    setIntervar(“执行的函数”,间隔时间)

    常用setIntervar(fun,1000); 每隔1秒钟,就去执行一次fun这个函数,fun是外面定义的。

    setIntervar(“fun”,1000); 可以用,不提倡。

    setIntervar(function(){},1000); 每隔1秒钟立即去执行这个函数,是直接在里面的。

    注意不可以这么写setIntervar(fun(),1000); 因为fun()是立即去执行,跟1秒后执行是冲突的。

    定时器特别像for循环,但定时器的最大特点是可以设定时间。

    定时器案例(简单)

    <script>
             window.onload = function(){
               var demo = document.getElementById("demo");
                 setInterval(fn,1000);  //  每隔1秒,就去 调用 一次 fn 这个函数
                 var num = 1;
                 function fn(){
                     num++;
                     demo.innerHTML = num ;
                 }
             }
         </script>
    </head>
    <body>
      <div id="demo"></div>
    </body>

    倒计时

    计算倒计时需要两个条件

    最终时间 12月12日

    现在时间 11月13日

    倒计时=最终时间 - 现在时间

    由于日期相减数字会有大小问题,所以是需要使用毫秒来减的。

    现在距离1970的毫秒数

    将来时间 距离1970的毫秒数

    将来毫秒-现在的毫秒就等于中间的毫秒 不断转换就可以了

    中间的毫秒除以1000等于现在的秒数

    中间的秒数除以60等于现在的分数

    现在的分数除以60等于现在的小时数

    现在的小时数除以24等于现在的天数

    1小时等于3600秒

    1小时=60分=60*60秒=3600秒

    1天=24小时=24*60分=1444分=1444*60秒=86400秒

    定义自己的日子

    这是最好的写法,没有兼容性var endTime = new Date(“2015/12/12 17:30:00”);

    如果date括号里面写日期 就是自己定义的时间。

    如果date括号里面不写日期,就是当前时间。

    <script>
         window.onload = function(){
             var demo = document.getElementById("demo");
             var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
             setInterval(clock,1000); // 开启定时器
             function clock(){
                 var nowTime = new Date(); // 一定是要获取最新的时间
                 //  console.log(nowTime.getTime());  获得自己的毫秒
                 var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
                 // 用将来的时间毫秒 -  现在的毫秒  / 1000 得到的 还剩下的秒  可能处不断 取整
                 // console.log(second);
                 // 一小时 3600 秒
                 // second / 3600  一共的小时数  /24   天数
                 var d = parseInt(second / 3600 / 24);  //天数
                 //console.log(d);
                 var h = parseInt(second / 3600 % 24)  // 小时
                 // console.log(h);
                 var m = parseInt(second / 60 % 60);
                 //console.log(m);
                 var s = parseInt(second % 60); // 当前的秒
                 console.log(s);
                 /* if(d<10)
                  {
                  d = "0" + d;
                  }*/
                 d<10 ? d="0"+d : d;
                 h<10 ? h="0"+h : h;
                 m<10 ? m="0"+m : m;
                 s<10 ? s="0"+s : s;
                 demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
             }
         }
    </script>

    问题:function fn() {} 与function() {}有什么区别?

    手写代码,知道都怎么拼,css样式的补课

  • 相关阅读:
    安富莱周报摘录
    关于MQTT:
    JavaScript高级用法三之浏览器对象
    编写高性能Web应用程序的10个技巧
    JavaScript高级用法二之内置对象
    JavaScript高级用法一之事件响应与网页交互
    eval、json.parse()的介绍和使用注意点
    史上最详细的JavaScript事件使用指南
    Image Lazy Load:那些延时加载图片的开源插件(jQuery)
    不要去管浏览器兼容
  • 原文地址:https://www.cnblogs.com/yiningfamily/p/4976432.html
Copyright © 2011-2022 走看看