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

一、
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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容