美文网首页
前端基本功--js实战5 11.05

前端基本功--js实战5 11.05

作者: 多佳小昕 | 来源:发表于2017-11-06 21:25 被阅读0次

    一、
    1.获取节点属性
    getAttribute(属性) 获取属性
    alert(demo.getAttribute("title"));
    2.设置节点属性
    SetAttribute(“属性”,”值”) 把属性改成什么值
    div.setAttribute(“class”,”demo”);
    3.删除某属性
    removeAttribute(“属性”);
    demo.removeAttribute(“title”)
    A.appendChild(B); B 一定是 A 孩子,同时b放到了a的里面,装到里面去了最后面。b放到a里面 。
    A.insertBefore(B,C) B C 都是A的孩子 把b放到a里面 ,但是是c的前面。
    二、动态生成小圆点

    window.onload = function () {
           var scroll = document.getElementById('scroll');
           var yuan = document.createElement("div");
           scroll.appendChild(yuan);//在scroll后添加节点yuan
           yuan.setAttribute("class","yuan");   //更改类名
           var ul = document.getElementById('ul');
           var lis = ul.children;    //ul的所有孩子
           for (var i = 0 ; i < lis.length ; i++) {
              var newspan = document.createElement("span"); //新建span元素
              newspan.innerHTML = i+1;  //更改文字内容
              yuan.appendChild(newspan);  //在yuan下面创建孩子
           }
       }
    

    三、

    一个发布微博的小实例,通过添加节点删除节点而实现,锻炼 添加删除节点的操作思路。

       <script type="text/javascript">
            window.onload = function () {
                var btn = document.getElementsByTagName('button')[0];
                var txt = document.getElementsByTagName('textarea')[0];
                var ul = document.createElement("ul");
                btn.parentNode.appendChild(ul);
                btn.onclick = function(){
                    if (txt.value == "") {
                    alert("不要发空微博!");
                    return false;
                }
                var newli = document.createElement("li"); //在这里思路出错 以为需要for遍历
                newli.innerHTML = txt.value + "<a href = 'javascript:;'>删除</a>";
                ul.appendChild(newli);
                txt.value = "" ;
    
                //实现新发布的微博在最前面
                var lis = ul.children;
                if (lis.length == 0){
                    ul.appendChild(newli);
                }//如果发布了第一条,直接添加在ul下
                else {
                    ul.insertBefore(newli,lis[0]);
                }//其余的每一条都放在lis的第一个
    
                //实现删除操作
                var as = document.getElementsByTagName("a");// 获取所有a标签
                for (i = 0 ; i < as.length; i++){
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode);
                        //点击a删除的是li标签的内容,也就是他的父级元素,在ul下删除a的父级元素li
                    }
                }
            }
    

    四、内置对象: 内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能。
    五、日期函数
    1.Date() 可以设置本地日期,年月日时分秒。
    var date = new Date(); // 声明
    console.log(date.getTime()); // 提倡使用的
    console.log(date.valueOf());
    console.log(Date.now());// 直接使用
    console.log(+new Date());
    得到毫秒数。
    2.常用
    getDate() 获取日 1-31
    getDay () 获取星期 0-6
    getMonth () 获取月 0-11
    getFullYear () 获取完整年份(浏览器都支持)
    getHours () 获取小时 0-23
    getMinutes () 获取分钟 0-59
    getSeconds () 获取秒 0-59
    getMilliseconds () 获取当前的毫秒
    getTime () 返回累计毫秒数(从1970/1/1午夜)

    1. 当前日期小例子
    <script type="text/javascript">
           window.onload = function () {
               var box = document.getElementById('box');
               var child = box.children;
               var date = new Date();//声明日期函数
               var arr = ["星期日" ,"星期一" ,"星期二" ,"星期三" ,"星期四" ,"星期五" ,"星期六" ,]
                child[0].innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+" " + arr[date.getDay()];//星期几是小写的,所以存在数组里。
                child[1].innerHTML = date.getDate();
            }
       </script>
    

    window.setInterval(“执行的函数”,间隔时间)
    setInterval(fun, 1000); 1000 ms 毫秒 每隔1秒钟,就去执行一次 fun 这个函数.
    setInterval(“fun()”,1000) 可以用
    setInterval( function(){} , 1000 )
    setInterval(fun(),1000) 错误的
    5.倒计时
    用将来时间减去现在的时间!
    用将来的毫秒数 - 现在的毫秒数 不断转换就可以了

     <script>
            window.onload = function(){
                var demo = document.getElementById('demo');
                var endTime = new Date("2017/11/11 00:00");//忘记加引号
                setInterval(clock,1000);
                function clock(){
                    var nowTime = new Date(); //写到里面,为了每次都获取最新时间
                    var second= parseInt((endTime.getTime()  - nowTime.getTime())/1000);
                      // 剩下的秒数
                    var d = parseInt(second/3600/24); //难算
                    var h = parseInt(second/3600%24);
                    var m = parseInt(second/60%60);
                    var s = parseInt(second%60);
                    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>
    

    总结:先定义结束时间,再调用定时器,定时函数中获取当前时间,计算剩下的时间,再计算时分秒等。

    相关文章

      网友评论

          本文标题:前端基本功--js实战5 11.05

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