javascript-2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:18px;}
.time{ height:30px; padding:10px;}

</style>
</head>
<body>
  <div class="time">
    <span id="t_d">00天</span>
    <span id="t_h">00时</span>
    <span id="t_m">00分</span>
    <span id="t_s">00秒</span>
  </div>

<script>
  function GetRTime(){
    var EndTime= new Date('2016/04/28 00:00:00');
    var NowTime = new Date();
var t = NowTime.getTime()- EndTime.getTime();
    var d=0;
    var h=0;
    var m=0;
    var s=0;
    if(t>=0){
      d=Math.floor(t/1000/60/60/24);
      h=Math.floor(t/1000/60/60%24);
      m=Math.floor(t/1000/60%60);
      s=Math.floor(t/1000%60);
    }

    document.getElementById("t_d").innerHTML = d + "天";
    document.getElementById("t_h").innerHTML = h + "时";
    document.getElementById("t_m").innerHTML = m + "分";
    document.getElementById("t_s").innerHTML = s + "秒";

  }
  setInterval(GetRTime,0);

</script>

</body>
</html>

这个一个从8月1号开始计时

单机事件，

<button type="button" id="btn">
            点我吧！
        </button>
        <div class="img" id="img"></div>
        <script type="text/javascript">
            // 1. 获取到页面内#btn的元素节点=>$btn
            // 2. 获取到页面内#img的元素节点=>$img
            // 3. 给$btn绑定鼠标点击事件（onclick）
            //     3.1. 当用户触发点击事件的时候，让$img显示
            // +1. 定义按钮状态变量$status

            // 1. 获取到页面内#btn的元素节点=>$btn
            var $btn = document.querySelector("#btn"),
                // 2. 获取到页面内#img的元素节点=>$img
                $img = document.querySelector("#img"),
                // +1. 定义按钮状态变量$status
                $status = 0;
            // 3. 给$btn绑定鼠标点 击事件（onclick）
            //     3.1. 当用户触发点击事件的时候，让$img显示
            $btn.onclick = function() {
                console.log("I am $btn onclick");
                if( $status == 0 ){
                    $img.style.display = "block";
                    $status = 1;
                }else{
                    $img.style.display = "none";
                    $status = 0;
                }
            };
        </script>

缓存图片

<img src="01443f564897a432f87512f6eed753.gif" alt="" id="load" width="50" style="border: 1px solid "/>
        <script type="text/javascript">
            var img = document.querySelector("#load");
            img.onload = function(){
                console.log("Image is done");
                img.setAttribute("src", "../../Archive Files/HWH1602-CSS-LESSON-03/Homework/第2节/zuoye2/bai.jpg");
            }
        </script>

属性节点更改

<a href="" title="这里是a链接">这里是a链接</a>
        <a href="">这里是a链接</a>
        <a href="">这里是a链接</a>
        <a href="">这里是a链接</a>
        <a href="">这里是a链接</a>
        <a href="">这里是a链接</a>
        <script type="text/javascript">
            // 1. 获取到页面内的所有a元素节点=>变量links
            // 2. 给所有links设置title属性的值为"这是a链接"
            
            // 1. 获取到页面内的所有a元素节点=>变量links
            var links = document.querySelectorAll("a");
            // 2. 给所有links设置title属性的值为"这是a链接"
            for (var i = 0; i < links.length; i++) {
                links[i].setAttribute("title", "这是a链接");
            }
        </script>

节点管理

<div class="progress-bar">
            <div class="box" id="box">100%</div>
        </div>
        <script type="text/javascript">
            // 1. 定义变量box
            // 2. 获取到页面内#box的元素节点=>box
            // 3. 在3秒以内将box的宽度从0增长到300像素的宽度
            
            // 1. 定义变量box
            // 2. 获取到页面内#box的元素节点=>box
            var box = document.querySelector("#box");
            
            // 3. 在3秒以内将box的宽度从0增长到300像素的宽度
            var startWidth = 0;
            var clock = setInterval(function(){
                console.log( ++startWidth );
                box.style.width = startWidth + "px";
                startWidth >= 300 ? clearInterval(clock) : null;
            }, 10);
        </script>