零JS筆記 | 定時器 | 抖動

August 27, 2013

setInterval(函數,毫秒);
clearInteval( setInterval(函數,毫秒); )
注意理解： num %= arr.length;

See the Pen vNBmeE by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

圖片切換實例更改
<a href='http://www.elmok.com/js/%E6%9C%80%E7%B0%A1%E5%96%AE%E7%9A%84%E5%9C%96%E7%89%87%E5%88%87%E6%8F%9B%E4%BA%8C.html
' target='_blank'>最簡單的圖片自動切換

function aplay(){
var timer = setInterval(function(){
    num++;
    num %= arrimg.length;//num = 0 1 2 3 4  === if(num = lis.length){num = 0}
    tab()
},1000)
}
//去掉鼠標移入移出
box.onmouseover = function(){
    clearInterval(timer)
};
box.onmouseout = aplay  //不能加括號

//打開時隔2s後再執行；體驗 
setTimeout(aplay,2000)

應用：打開網頁自動彈出；
setTimerout(函數,毫秒);
clearTimeout( setTimerout(函數,毫秒); )

var imgbox = document.getElementById('img')
setTimeout(function(){
    imgbox.style.display = 'inline-block';    //圖片為 inline-block;
        setTimeout(function(){                //3秒後關閉; 
            imgbox.style.display = 'none'
        },3000)
},2000)

圖片鼠標按下自動滾動，抬起停止
onmousedown
onmouseup

See the Pen PPYmMj by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

抖動函數
原理：原位置以遞減方式向兩邊相加，越加越小直到0;
抖完後執行回調~

//方法封裝
function shake(obj, attr, pos, endfn) {
  // var pos = parseInt(getStyle(obj,attr)); //去掉ps //隱患，多次觸發時每次的初始位置不同；
  var arr = []; //20 -20 18 -18
  var shake = null;
  var num = 0;
  for (var i = 20; i > 0; i -= 2) {
    arr.push(i, - i);
  }
  arr.push(0);
  clearTimeout(obj.shake)
  shake = setInterval(function () {
    obj.style[attr] = pos + arr[num] + 'px'
    num++
    if (num == arr.length) {
      clearInterval(obj.shake)
      endfn && endfn()
    }
  }, 50)
}
var img = document.getElementsByTagName('img')
var on = true;
for (var i = 0; i < img.length; i++) {
  img[i].style.left = 100 + i * 110 + 'px'
  var pos = parseInt(getStyle(img[i], 'top'));
  img[i].onmousemove = function () {
    shake(this, 'top', pos)
  }
}
<img src="c1.jpg" alt="" width="150"/>
<img src="c2.jpg" alt="" width="150"/>
<img src="c3.jpg" alt="" width="150"/>
<img src="c4.jpg" alt="" width="150"/>
<img src="c5.jpg" alt="" width="150"/>

修復版：

    function shake(obj, attr, endfn) {
        if (obj.door) {
            return
        }
        obj.door = 1;
        var pos = parseInt(css(obj,attr)); 
        var arr = []; //20 -20 18 -18
        var num = 0;
        for (var i = 20; i > 0; i -= 2) {
            arr.push(i, - i);
        }
        arr.push(0);
        clearTimeout(obj.shake)
        obj.shake = setInterval(function () {
            obj.style[attr] = pos + arr[num] + 'px'
            num++
            if (num == arr.length) {
                clearInterval(obj.shake)
                endfn && endfn()
                obj.door = 0;
            }
        }, 50)
    }

零JS筆記 | 運算符 | 流程控制 | return | getStyle

August 26, 2013

0%3 = 0
1%3 = 1
2%3 = 2
3%3 = 0

a%b
a未遇到自己前，=a
a遇到自己, =0
a超過自己，=除以整數倍a後，又開始未遇到自己的情況

var i = 0;
i++;
if (i === 5) {
  i = 0
} //可寫成下面

i % 5 //i = 0 1 2 3 4
for(var i=0;i<a;i++){
    i%b
}
if( a<=b ){ 0.1.2.3...a-1 }
if( a>b  ){ 0.1.2.3...b-1...[0.1.2....a-b-1 ]}

var s  =6500 //秒
alert(Math.floor(s/60)+'分'+s%60+'秒')

給所有li加間隔顏色，及移入移出

var ul = document.getElementById('ul')
var li = ul.getElementsByTagName('li')
var arr = ['red','yellow','blue'];

//第一種寫法
for (var i = 0; i < li.length; i++) {
  li[i].index = i;
  li[i].style.background = arr[i % arr.length]; //0 1 2 0 1 2 0 1 2 .....
  li[i].onmousemove = function () {
    this.style.background = 'gray'
  }
  li[i].onmouseout = function () { //for 裏包fn，不能用i,所以給所有li建索引值
    this.style.background = arr[this.index % arr.length] // 0 1 2 0 1 2
  }
}

//第二種寫法
var str = '' //存鼠標移過去時原來的顏色
for (var i = 0; i < li.length; i++) {
  li[i].style.background = arr[i % arr.length];
  li[i].onmouseover = function () {
    str = this.style.background; // 先存颜色
    this.style.background = 'gray';
  };
  li[i].onmouseout = function () {
    this.style.background = str;
  };
}

重點思路：

1、同一li切換：使用開關on;
2、多個li切換：點擊時，先for清空所有li[i]，再當前添加li[this.index]添加事件；

如：

var on = true;
for (var i = 0; i < li.length; i++) {
  li[i].index = i;
  li[i].style.background = arr[i % arr.length];
  li[i].onmouseover = function () {
    str = this.style.background; // 先存颜色
    this.style.background = 'gray';
  };
  li[i].onmouseout = function () {
    this.style.background = str;
  };
  li[i].onclick = function () {  //1、每次點擊時當前變黑色，先還原所有顏色，再當前添加黑色
    for (var i = 0; i < li.length; i++) {
      li[i].style.background = arr[i % arr.length];
    }
    this.style.background = '#000'
    for (var i = 0; i < li.length; i++) { //2、每次點擊時當前over/out事件去除，所以是先for還原所有事件,再當前去除事件 li[this.index]
      li[i].onmouseover = function () {
        str = this.style.background; // 先存颜色
        this.style.background = 'gray';
      };
      li[i].onmouseout = function () {
        this.style.background = str;
      };
    }
    li[this.index].onmouseover = li[this.index].onmouseout = null;
  }
}

&&與 、||或、!或
10 < 80 && 23 < 100 ,左邊必須成立才會看右邊

var a = 100>30 && 40
alert(a) //40
var a = 100<30 && 40
alert(a) //false

10 < 80 || 23 < 100 ，左邊成立，則不會看右邊；都不成立返回false

var a = 100>30 || 40
alert(a) // true
var a = 100<30 || 40
alert(a) // 40
var str = ''
alert(!!str) //false，//雙否表示：第一個先轉數據為boolean值，再取反；

反選小例子

var inp = document.getElementsByTagName('input')
inp[0].onclick = function () {
  for (var i = 1; i < inp.length; i++) {
    inp[i].checked = !inp[i].checked
  }
}

流程控制：
判斷：if switch (case break default) ？：
循環： while for
跳出：break continue

var str = 'js'
switch( str ){
    case 'js': alert('js');break;
    case 'html': alert('html');break;
    default: alert(str);
}
//break不加，則執行完後會繼續執行，直到遇見break或執行完所有
if(a<10){alert(a)}else{{alert(b)}}

a<b ? alert(a) : alert(b);
var i = 0;
while(i<3){
alert(i);
i++;
}

for(var i=0;i<6;i++){
    if(i==4){
        break; //跳出for，停止執行
    }
    alert(i)   // 0 1 2 3 
}   
//最後循環外的i = 4

for(var i=0;i<6;i++){
    if(i==4){
        continue ; //跳過這一次循環for
    }
    alert(i)  //0 1 2 3 5 
}
//最後循環外的i = 6

真假：數據類型-數字（NaN）、字符串、布爾、函數、對象{elem、[]、{}、null}、undefined

真：非0數字（正負數、小數）、非空字符串、true、函數、能找到的元素、[]、{}、
假：0、NaN、空字符串（''）、false、不能找到的元素、null、undefined

return返回值

函數名() = return後面的內容

//return 函數
fn2()
function fn2(){
    return function(){
    alert(1)
}
}
fn2()() //彈出1

//return 對象
fn3().onload = function(){document.body.innerHTML = 123};function fn3(){return window}

//例如
function $(id) {
  return document.getElementById(id)
}

//簡單模擬$
function $(v) {
  if (typeof v === 'function') {
    window.onload = v;
  } 
  else if (typeof v === 'string') {
    return document.getElementById(v)
  } 
  else if (typeof v === 'object') {
    return v;
  }
}
$(function(){
    $('btn').onclick = ....
        $(this)....
})

alert(fn());
function fn(){
    return; //默認返回值為undefined;
}

function fn(){
    return 123;
        alert('無法彈出')
}
/*
1、函數名() = return 後面的值；
2、所有函數默認返回值：未定義；
3、return後任何代碼都不執行；
*/

函數內部： function fn(){ this return arguments event ...}
實參： fn(1,2,3)
形參： arguments ----- [實參的集合]，無數組的方法
當函數參數個數無法確定時，使用arguments

fn(1,2,3)
function fn(){
    alert(arguments)  //object arguments
    alert(arguments.length)  //3
    alert(arguments[0]) //1
}
//小應用：當函數參數個數無法確定時，使用arguments
sum(1,2,3....'+')
function sum() {
  var n = 0;
  for (var i = 0; i < arguments.length - 1; i++) {
    if (arguments[arguments.length - 1] == '+') {
      n += arguments[i]
      alert(1)
    } 
    else if (arguments[arguments.length - 1] == '-') {
      n -= arguments[i]
    }
  }
  return n
}
//arguments 能讀也能寫，實參的集合
var a = 1;
function fn2(a){
    arguments[0] = 3 //arguments[0] = a
    alert(a);  //3
    var a =2
    alert(arguments[0])
}
fn2(a); //2
alert(a)  //1

獲取瀏覽器最終計算後樣式 ：
1、getComputedStyle(obj).width IE9+
2、obj.currentStyle.width IE8-
注意：適用範圍 width height opacity backgroundColor zIndex marginRight ...只要有空格，全部undefined
另：不要去獲取未設置後的樣式 ;
FF4.0以前 getComputedStyle($('div'),4.0以前可以跟任何參數才有反應).width);


function getStyle(obj, attr) {
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj) [attr]
}
  1. 1
  2. ...
  3. 31
  4. 32
  5. 33
  6. 34
  7. 35
  8. 36
  9. 37
  10. ...
  11. 54