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

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]
}

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

最新文章

最近回复

分类

归档

其它