Day5

时间：2016-08-13 21:02:38 阅读：173 评论：0 收藏：0 [点我收藏+]

微博发布原理操作:

　　首先创建节点再操作节点,

回顾:

　　//创建所需的元素

　　var txt = document.getElementsByTagName(“textarea”)[0];

　　var btn = document.getElementsByTagName(“button”)[0];

　　var ul = document.createElement(“ul”); //创建后面需要添加子节点li 到 ul中,由于不需要点击一次创建一次则声明到最外边就好.

　　btn.parentNode.appendChild(ul); //由于父类不是采用id选择器,所以使用<子类的父节点>来作为父类对象添加子节”ul”. 若是有id则直接使用id就可以!

//点击事件

　　btn.onclick = function(){

//判断文本域是否为空, 满足为空的情况下弹出提示并终止运行下行代码.做到纠错的效果!

　　if(txt.value == ‘’){

　　　　alert(“输入内容不能为空!);

　　return false; //满足条件并终止代码继续执行!

　}

//创建新的li

　　var newli = document.createElement(“li”);

　　ul.appendChild(newli); // 在ul中添加子节点li

　　newli.innerHTML = txt.value + <a href=”#”>删除</a>; //给新的li赋值新的文本

　　txt.value = ‘‘; //成功执行上述代码后清空文本域中的值

//获取所有ul中的子节点li

　　var lis = ul.children;

//遍历并判断是否有子节点,如有则参照第一个子节点添加新的子节点”li”,若没有则创建新的子节点’li’.

　　for(var i = 0;i<lis.length;i++)

　　{

　　　　if(lis.length == 0){

　　　　ul.appendChild(newli);

　　}else{

　　　　ul.insertBefore(newli,lis[0]);　　

　　}

//获取所有的a标签,然后每次点击则删除ul下的当前父节点, 也就是ａ标签当前的子节点li ;

　　var as = document.getElementsByTagName(“a”);

　　for(var i = 0;i<as.length;i++)

　　{

　　　　as[i].onclick = function(){

　　　　ul.removeChild(this.parentNode);//删除a标签当前的父节点li

　　}

总结:

　　整个内容使用了节点的操作, 包括添加\插入\删除,需要注意的是其中一些灵活的用法,比如 btn.parentNode.appendChild(ul); (button的父节点(div盒子)添加新节点(ul)),之后学的东西越多,逻辑性越强,自然实现某个效果的方式大不相同,区别在于优化性能和代码量细节.

轮播图基础样式:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        ul,ol{list-style:none}

        .box {

            width: 730px;

            height: 454px;

            margin: 100px auto;

            overflow: hidden;

            position: relative;

        }

        .circle {

            position: absolute;

            left: 50%;

            margin-left:-50px;

            bottom:10px;

        }

        .circle span {

            float: left;

            width: 18px;

            height: 18px;

            border-radius: 50%;

            

            text-align: center;

            line-height: 18px;

            margin-right: 10px;

            cursor: pointer;

        }

        .circle span.current {

            background-color: purple;

        }

    </style>

<script>

window.onload = function(){

    var scr = document.getElementById("scroll");

    var oDiv = document.createElement("div");

    var ul = document.getElementById("ul");

    scr.appendChild(oDiv);

 

    var lis = ul.children;

    for(var i = 0;i<lis.length;i++)

    {

        var spans = document.createElement("span");

        oDiv.appendChild(spans);

        spans.innerHTML = i+1;

        oDiv.setAttribute("class","circle");

        oDiv.children[0].setAttribute("class","current");

    }

}

</script>

</head>

<body>

<div class="box" id="scroll">

    <div class="slider">

        <ul id="ul">

            <li><img src="images/11.jpg" /></li>

            <li><img src="images/22.jpg" /></li>

            <li><img src="images/33.jpg" /></li>

            <li><img src="images/44.jpg" /></li>

            <li><img src="images/55.jpg" /></li>

            <li><img src="images/66.jpg" /></li>

        </ul>

    </div>

</div>

</body>

</html>

 

//====================================================================


<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        ul,ol{list-style:none}

        .box {

            width: 730px;

            height: 454px;

            margin: 100px auto;

            overflow: hidden;

            position: relative;

        }

        .circle {

            position: absolute;

            left: 50%;

            margin-left:-50px;

            bottom:10px;

        }

        .circle span {

            float: left;

            width: 18px;

            height: 18px;

            border-radius: 50%;

            

            text-align: center;

            line-height: 18px;

            margin-right: 10px;

            cursor: pointer;

        }

        .circle span.current {

            background-color: purple;

        }

    </style>

    <script>

        window.onload = function(){

               var scroll = document.getElementById("scroll");

               var circle = document.createElement("div");   // 新的

              //circle.className = "circle";  // 更改的类名

               circle.setAttribute("class","circle");   // 更为常用

               scroll.appendChild(circle);

               var ul = document.getElementById("ul");

               var lis = ul.children;  // ul 的所有孩子

               //alert(lis.length);

              // 生成了新的大盒子

 

             // 大盒子里面要放入 n个小的span

              for(var i=0; i<lis.length; i++)

              {

                   var newspan = document.createElement("span");  // 创建 6次 span

                    newspan.innerHTML = i+1;

                   circle.appendChild(newspan);

              }


              var child = circle.children;

              child[0].setAttribute("class","current");  // 第一个孩子 添加 current

        }

    </script>

</head>

<body>

<div class="box" id="scroll">

    <div class="slider">

        <ul id="ul">

            <li><img src="images/11.jpg" /></li>

            <li><img src="images/22.jpg" /></li>

            <li><img src="images/33.jpg" /></li>

            <li><img src="images/44.jpg" /></li>

            <li><img src="images/55.jpg" /></li>

            <li><img src="images/55.jpg" /></li>

            <li><img src="images/66.jpg" /></li>

        </ul>

    </div>

</div>

</body>

</html>

设置节点属性操作:

设置节点属性:

　　setAttribute(“属性”,”值”);

　　obj.setAttribute(“class”,”circle”);

获取节点属性:

　　getAttribute(“属性”);

　　obj.getAttribute(“title”);

删除节点属性:

　　removeAttribute(“属性”);

　　obj.removeAttribute(“src”);

内置对象:

内置对象就是指语言自带的一些对象,供开发者使用,这些对象主要提供了一些常用或者基本而必要的功能.

如:手机，　打电话　发短信　上网.

日期函数: ( Date() )

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

声明日期:

　　var date = new Date();

创建声明了一个新日期函数赋值给date变量.

使用该变量函数对象:

date.getTime(): //推荐使用区别:两者有微秒误差.

date.getvalueOf(); 两个都是获取1970年到当前时间的毫秒数方法.

同等:

Date.now( );

+new Date( ); 直接使用的.

常用日期方法:

getDate()　　　　获取日期1-31日;

getDay()　　　　　 获取星期 0-6; //实际开发中需要+1

getMonth()　　　　获取月份 0 - 11;　 //实际开发中需要+1

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

getHours()　　 获取小时, 0 - 23;

getSeconds()　　　　获取秒 0 - 59;

getMilliseconds()　　获取当前毫秒;

getTime()　　　　 返回累计毫秒数(从1970.1.1午夜);

定时器:

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

例:

　　setInterval(“fn()”,1000);

　　解读就是1000毫秒(1秒)执行一次函数名为 fn的函数.

2种写法:

　　1 setInterval(“fn()”,1000);

　　2 setInterval( function(){ ... },1000);

错误写法:

　　setInterval(fn(),1000);

倒计时:

 1 <script>
 2 
 3 window.onload = function(){
 4 
 5 //将来的时间
 6 
 7 var endTime = new Date("2017/03/15 00:00:00");
 8 
 9  
10 
11 setInterval(fn,1000);
12 
13 function fn(){
14 
15 //当前时间的毫秒数
16 
17 var nowTime = new Date();
18 
19  
20 
21 //将来的毫秒数 - 当前时间的毫秒数 = 剩下的毫秒数
22 
23 var seconds = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
24 
25  
26 
27 //然后再用它们之间剩下的时间用来进行整除取余以获得最终的 天\时\分\秒.
28 
29  
30 
31 //天 剩下毫秒数除以3600(每小时[60分钟]乘以60秒) 再除以 24(1天24小时) 即得到天数
32 
33 var d = parseInt(seconds / 3600 / 24);
34 
35  
36 
37 //时 剩下的毫秒数除以3600(小时 分钟的积) 然后取余24 即得到最终小时数.
38 
39 var h = parseInt(seconds / 3600 % 24);
40 
41  
42 
43 //分 剩下的毫秒数除以60(每小时60分钟) 再对60(分钟数)取余 则得到最终的分钟数
44 
45 var m = parseInt(seconds / 60 % 60 );
46 
47  
48 
49 //秒 剩下的毫秒数对60取余即得到秒数
50 
51 var s = parseInt(seconds % 60 );
52 
53  
54 
55 d < 10? d = "0" + d : d ;
56 
57 h < 10? h = "0" + h : h ;
58 
59 m < 10? m = "0" + m : m ;
60 
61 s < 10? s = "0" + s : s ;
62 
63  
64 
65 var box = document.getElementById("d");
66 
67  
68 
69 box.innerHTML = "距离时间剩余:" +　d + " 天 " + h + " 时 " + m + " 分 " + s + " 秒" ;
70 
71 }
72 
73 }
74 
75 </script>

　　ps:主要搞清楚换算问题,把((将来的时间-当前的时间) / 1000)剩余的毫秒数在进行换算成天\时\分\秒.

　　再者+0问题, 和实际开发需求挂钩.

Day5

原文：http://www.cnblogs.com/Rimashuai/p/5768751.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)