### 運算符
- 算數:` +加、-減、*乘、/ 除、%取模 `
- 實例:隔行變色、秒轉時間
- 賦值:` =、+=、-=、*=、/=、%= `
- ` +=` : `i += 1 等于 i++ `
- 關系:` <、>、<=、>=、== 、===、!=、!==`
- `!==` :不同類型不比較,且無結果,同類型才比較,對應 `===`
- `!=`:若類型不同,會償試轉換類型,對應 `== `
- 邏輯:&&與、||或、!否
- 實例:全選與反選
- 運算符優先級:括號
- 代碼:
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>運算符</title>
<style>
.blue {
width: auto;
height: 20px;
background: blue;
}
.yellow {
width: auto;
height: 20px;
background: yellow;
}
</style>
<script>
window.onload = function () {
// 封裝 getElementById 函數
function get(id) {
return document.getElementById(id);
}
// 封裝 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 隔行變色
function liCol() {
let i = 0;
let oLi = gets('li') ;
for (i = 0; i < oLi.length; i++) {
if (i % 2 === 0) {
oLi[i].className = 'blue';
} else {
oLi[i].className = 'yellow';
}
}
}
liCol();
// 毫秒轉日期
const date = Date.now();
// 60000ms / 1000ms /60s /60m /24h /365d
const millisecond = date % 1000 + '毫秒';
const second = parseInt(date/1000) % 60 + '秒';
const minute = parseInt(date/1000/60) % 60 + '分';
const hour = parseInt(date/1000/60/60) % 24 + 8 + '小時';
const day = parseInt(date/1000/60/60/24/365) % 30 - 9 + '號';
const month = parseInt(date/1000/60/60/24/30) % 12 + 4 + '月';
const year = parseInt(date/1000/60/60/24/265) + 1951 +'年';
const d1 = get('d1');
d1.innerHTML = millisecond+ second+ minute+ hour+ day+ month+ year;
}
// 賦值 ` =、+=、-=、*=、/=、%= `
let i = 11;
i += 2;
console.log(i);
i -= 3;
console.log(i);
i *= 2;
console.log(i);
i /= 2;
console.log(i);
i %= 3;
console.log(i);
// 判斷 <、>、<=、>=、== 、===、!=、!==
if (i > 0) {
console.log('i > 0');
}
if (i <= i) {
console.log('i <= i');
}
if (i == '1') {
console.log('i == "1"')
}
if (i === 1) {
console.log('i === 1')
}
if (i != '1') {
console.log('i != 2')
}
if (i !== 1) {
console.log('i !== 1')
}
// 邏輯 &&與、||或、!否
if (i<2 && i>0) {
console.log('i<2 && i>0')
}
if (i<2 || i<0) {
console.log('i<2 || i<0')
}
</script>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="d1"></div>
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一個 JS 特效:鼠標提示框
- 網頁換膚和 if 判斷
- 函數傳參
- 循環 while 和 for
- 導航欄選項卡
- JS 簡易日歷
- JavaScript 基礎
- JavaScript 組成
- 變量類型
- 變量類型轉換
- 變量的作用域和閉包
- 命名規范
- 運算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函數返回值
- 函數傳參與行間樣式
- 數組基礎操作
- 定時器的使用
- 定時器的作用
- 數碼時鐘
- Date 對象其它方法
- 延時提示框
- 無縫滾動
- DOM基礎應用
- DOM 基礎
- DOM 節點
- 操作元素屬性
- DOM 元素靈活查找
- DOM 操作應用
- 創建、插入和刪除元素
- 文檔碎片
- DOM操作應用高級
- 表格標簽
- 表格應用
- 表單應用
- JS 運動基礎
- 運動基礎
- 運動框架及應用
- 緩沖運動
- 運動的停止條件
- JS 運動應用
- 多物體運動框架
- 任意值運動框架
- 仿 Flash 圖片展示
- JS 運動中級
- 鏈式運動框架
- 完美運動框架
- 運動框架總結
- 運動框架應用
- JS事件基礎
- Event 對象和事件
- 鼠標事件
- 鍵盤事件
- JS 事件中級
- 默認事件
- 拖拽
- JS 事件高級應用
- 事件綁定
- 高級拖拽
- 自定義滾動條
- Ajax 基礎
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中級
- 編寫 Ajax
- Ajax 數據
- JS 面對對象基礎
- 面對對象是什么
- JS 中的面對對象
- 第一個面對對象的程序
- 工廠方式
- 原型:Prototype
- 面對對象編程方式
- JS 面對對象實例
- 面對對象的選項卡
- JS 面對對象高級
- Json 方式的面向對象
- 拖拽和繼承
- 使用繼承
- 系統對象
- BOM 應用
- BOM 基礎
- 尺寸及坐標
- 常用方法和事件
- COOKIE 基礎與應用
- 什么是 cookie
- 使用 cookie
- JS 中的正則表達式
- 正則表達式基礎
- 字符串與正則配合
- 字符串
- 量詞
- 常用正則例子
- JS Template 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符