### JS 簡易日歷
- 程序實現思路
- 類似于選項卡,只是下面只有一個div
- innerHTML 的使用
- 數組的使用
- 定義:` arr = [1, 2, 3] `
- 使用:` arr[0] `
- 字符串拼接
- 作用:拼接兩個字符串
- 問題:拼接中的優先級
- 就近相加, 字符串后面數字相加要加括號
- 代碼:
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>簡易日歷</title>
<style>
body {
margin: 0;
padding: 0;
}
td {
border: 5px solid rgb(218, 218, 218);
width: 59px;
height: 59px;
text-align: center;
background: rgb(83, 83, 83);
color: white;
}
.td {
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
/* 日歷數字區 */
#t1 {
border: 10px solid rgb(218, 218, 218);
margin:0 auto;
position: relative;
width: 240px;
height: 320px;
background: rgb(218, 218, 218);
}
/* 下方文字 */
#d2 {
margin:0 auto;
width: 240px;
height: 100px;
background: rgb(218, 218, 218);
}
#p1 {
position: relative;
margin: auto;
width: 205px;
height: 80px;
background: rgb(255, 255, 255);
}
</style>
<script>
window.onload = function () {
// 封裝 getElementById 函數
function get(id) {
return document.getElementById(id);
}
// 封裝 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 獲取所有 td,注冊 onmouseover 事件,添加索引
// console.log(gets('td'))
var tds = gets('td');
var i = 0;
for (i = 0; i < tds.length; i++) {
tds[i].index = i;
tds[i].onmouseover = function () {
// 先清空 td className
for (a = 0; a < tds.length; a++) {
tds[a].className = '';
}
// 修改td className 并插入文字
tds[this.index].className = 'td';
// console.log(i);
get('p1').innerHTML = (this.index + 1) + arr[this.index];
}
}
arr = [
'月活動:學編程、英語', '月活動:學編程、英語', '月活動:學編程、日語',
'月活動:學編程、畫畫', '月活動:學編程、旅游', '月活動:學編程',
'月活動:學編程', '月活動:學編程', '月活動:學編程',
'月活動:學編程', '月活動:學編程', '月活動:學編程'
]
}
</script>
</head>
<body>
<div id="d1">
<table id="t1">
<tr>
<td>1 <br>JAN</td>
<td>2 <br>FER</td>
<td>3 <br>MAR</td>
</tr>
<tr>
<td>4 <br>APR</td>
<td>5 <br>MAY</td>
<td>6 <br>JUN</td>
</tr>
<tr>
<td>7 <br>JUL</td>
<td>8 <br>AUG</td>
<td>9 <br>SEP</td>
</tr>
<tr>
<td>10 <br>OCT</td>
<td>11 <br>NOV</td>
<td>12 <br>DEC</td>
</tr>
</table>
<div id="d2">
<p id="p1">
</p>
</div>
</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 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符