計(jì)時(shí)器

<h1 id="time"></h1>
  <script>
    //倒計(jì)時(shí)
    function countDown(year,m,d){
      var time = new Date();//現(xiàn)在的時(shí)間 
      var futuretime = new Date(year,m,d);//未來截止時(shí)間
      var nowmin = time.getTime();//現(xiàn)在的毫秒數(shù)
      var futuremin = futuretime.getTime();//未來的毫秒數(shù)
      var  gap = futuremin - nowmin;  //進(jìn)行相減，求出時(shí)間差
      // console.log(gap);
      var day = Math.floor(gap / 1000 / 60 /60 / 24);//天
      var hour = Math.floor(gap / 1000 / 60 / 60 % 24);//時(shí)
      var minute = Math.floor(gap / 1000 / 60 % 60);//分鐘
      var seconds = Math.floor(gap / 1000 % 60);//秒
      // console.log(seconds)
      var str = `${day}天${hour}時(shí)${minute}分${seconds}秒`;
      return str;
    }
    //8月 
    //獲取  
    var times = document.getElementById('time');
    var timer = null;
    timer = setInterval(function(){
      times.innerHTML = countDown(2019,8,2);
    },1000)
  </script>

·

按鈕開關(guān)

<img src="./guan.png" alt="" id="img">
    <button id="open">開燈</button>
    <button id="close">關(guān)燈</button>
    <script>
        function getId(name) {
            return document.getElementById(name);
        }
        var open = getId('open');
        var close = getId('close');
        var img = getId('img');

        open.onclick = function () {
            img.src = './liang.png';
            img.style = 'width:140px;height:200px';
        }
        close.onclick = function () {
            img.src = './guan.png';
            img.style = 'width:140px;height:200px';
        }
    </script>

`

九九乘法表

for (i = 9; i >= 1; i--) {
   for (g = 1; g <= i; g++) {
       document.write(g + '*' + i + '=' + i * g + '&nbsp;&nbsp;&nbsp;&nbsp;')  
   }
   document.write('<br>')
}

1到100 的偶數(shù)和

var a = 0
for (x = 0; x <= 100; x += 2) {
      a += x
}
console.log(a)    //  2550 

輪播

var img_list = document.querySelectorAll('ul li');
var ol_li = document.querySelectorAll('ol li');
var box = document.getElementsByClassName('box')[0];
var left = document.getElementById('left');
var right = document.getElementById('right');
var timer = null;
var inder = 0;

timer = setInterval(auto, 1000);

function auto() {
    inder++
    if (inder > img_list.length - 1) {
        inder = 0;
    }
    getThis()
}

function getThis() {
    for (var i = 0; i < img_list.length; i++) {
        img_list[i].style = 'display:none'
        ol_li[i].className = ''
    }
    img_list[inder].style = 'display:block'
    ol_li[inder].className = 'arr'
}

right.onclick = function () {
    auto()
}
left.onclick =function(){
    inder--
    if (inder < 0) {
        inder=img_list.length - 1
    }
    getThis()
}

for(var i =0 ;i<ol_li.length;i++){
    ol_li[i].ind=i
    ol_li[i].onmouseover=function(){
        for(var f=0;f<ol_li.length;f++){
            ol_li[f].className= ' '
        }
        ol_li[this.ind].className = 'arr';
        inder = this.ind;//同步計(jì)時(shí)器的下標(biāo)
        getThis();//排他
    }
}

box.onmouseover = function () {
    clearInterval(timer);
}
box.onmouseout = function () {
    timer = setInterval(auto, 1000);
}

推拉門

var li_list = document.querySelectorAll('ul li');

//每個(gè)初始位置
for (var i = 0; i < li_list.length; i++) {
  li_list[i].style = `left:${i * 50}px`;
}

for (var i = 0; i < li_list.length; i++) {
  li_list[i].index = i;
  //劃過每一項(xiàng)
  li_list[i].addEventListener('mouseover', function () {
    var ind = this.index;//當(dāng)前劃過的下標(biāo)剪芍，就是分水嶺
    for (var j = 0; j < li_list.length; j++) {
      if (j > ind) {//下標(biāo)前面的 動(dòng)
        li_list[j].style = 'left:' + (600 +  (50 * (j -1)))+'px';
      } else {//下標(biāo)前面的不動(dòng)
        li_list[j].style = `left:${j * 50}px`;
      }
    }
  })
}