获取节点属性

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;
             width: 600px;
             height: auto;
             border:1px solid #333;
             padding: 30px 0;
         }
         textarea {
             width: 450px;
             resize: none;  /*防止用户拖动 右下角*/
         }
         .box li {
             width: 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样式的补课

js基础第六天的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  3. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  4. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  5. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  6. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

随机推荐

  1. hdu 4710 Balls Rearrangement（）

    http://acm.hdu.edu.cn/showproblem.php?pid=4710 [code]: #include <iostream> #include <cstdio ...

  2. poj 3522 Slim Span (最小生成树kruskal)

    http://poj.org/problem?id=3522 Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions ...

  3. Webstorm10.0.4注册码

    分享几个Webstorm10的注册码: (1) user name :EMBRACE ===== LICENSE BEGIN =====17739-1204201000002KkN!4z2O8JEyj ...

  4. 5.5 准备创建bean

    5.5  准备创建bean 我们不可能指望在一个函数中完成一个复杂的逻辑,而且我们跟踪了这么多Spring代码,经历了这么多函数,或多或少也发现了一些规律:一个真正干活的函数其实是以do开头的,比如d ...

  5. string.Equals 比较2个字符串是否相同忽略大小写

    bool res = string.Equals(str1, str2, StringComparison.CurrentCultureIgnoreCase)

  6. Scala中的Extractor

    Scala中使用unapply方法可以实现三种extractor(另外使用unapplySeq也可以实现extractor) def unapply(object: S): Option[(T1, . ...

  7. firefly的环境搭建（2013年9月25日最新，win下最详图文）

    源地址:http://www.9miao.com/question-15-53785.html 一.安装PythonFirefly是采用Python编写的高性能.分布式游戏服务器框架,所以使用Fire ...

  8. DJANGO和UIKIT结合，作一个有进度条的无刷新上传功能

    以前作的上传,在糙了,所以在用户体验上改进一下. 同时,结合DJANGO作定位上传. 这其中分两步进行,第一次上传到TMP目录下, 第二次,将TMP下的文件转移到标准目录下. form.py file ...

  9. Android Spinner(级联 天气预报）

    activity_spinner.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...

  10. mac 升级后 web 服务器起不来 问题

    4. Apache 要本地调试代码的时候发现Apache也不能幸免地跪了.执行apachectl -v发现Apache已经更新到2.4.9版本了.一定又是因为版本更新出了什么差错. 4.1 修改htt ...