[TOC]
# 每日單詞
# 作業講解
```javascript
function toDouble(num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
function day2str(obj) {
switch (obj.getDay()) {
case 0:
return "seven";
case 1:
return "one";
case 2:
return "two";
case 3:
return "three";
case 4:
return "four";
case 5:
return "five";
case 6:
return "six";
}
}
window.onload = function() {
if (!document.getElementsByClassName) {
// 判斷方法是否存在
document.getElementsByClassName = function(className) {
//創建class選擇器方法
var children = document.getElementsByTagName("*");
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var classNames = children[i].className.split(" ");
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(children[i]);
break;
}
}
}
return elements;
};
}
var oTime = document.getElementsByClassName("time")[0];
var oYear = document.getElementsByClassName("year")[0];
var aTimeImg = oTime.getElementsByClassName("num");
var aYearImg = oYear.getElementsByClassName("num");
var oDay = document.getElementsByClassName("num2")[0];
function showTime() {
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
for (var i = 0; i < str.length; i++) {
aTimeImg[i].src = "images/" + str.charAt(i) + ".png";
}
}
function showYear() {
var oDate = new Date();
var str =
toDouble(oDate.getFullYear()) +
toDouble(oDate.getMonth() + 1) +
toDouble(oDate.getDate());
for (var i = 0; i < str.length; i++) {
aYearImg[i].src = "images/" + str.charAt(i) + ".png";
}
}
function showDay() {
var oDate = new Date();
var sDay = day2str(oDate);
oDay.src = "images/" + sDay + ".png";
}
setInterval(showTime, 1000);
setInterval(showYear, 1000);
setInterval(showDay, 1000);
showTime();
showYear();
showDay();
};
```
兼容IE的終極解決方案
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>
</head>
<body>
<div id="clock" class="date">
<h2><img src="images/title.png" /></h2>
<div class="year">
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img src="images/year.png" alt="year" />
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img src="images/month.png" alt="month" />
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img src="images/seven.png" alt="seven" />
</div>
<div class="time">
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img src="images/sign.png" alt="sign" />
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img src="images/sign.png" alt="sign" />
<img class="num" src="images/0.png" alt="0" />
<img class="num" src="images/0.png" alt="0" />
<img class="pos2" src="images/week.png" alt="week" />
<img class="num2" src="images/one.png" alt="one" />
</div>
</div>
</body>
<script>
function toDouble(num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
function num2Day(num) {
var oDay = {
0: "seven",
1: "one",
2: "two",
3: "three",
4: "four",
5: "five",
6: "six "
};
return oDay[num];
}
var getElementsByClassName = function(className, tag, elm) {
if (document.getElementsByClassName) {
getElementsByClassName = function(className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = tag
? new RegExp("\\b" + tag + "\\b", "i")
: null,
returnElements = [],
current;
for (var i = 0, il = elements.length; i < il; i += 1) {
current = elements[i];
if (!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
} else if (document.evaluate) {
getElementsByClassName = function(className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver =
document.documentElement.namespaceURI ===
xhtmlNamespace
? xhtmlNamespace
: null,
returnElements = [],
elements,
node;
for (var j = 0, jl = classes.length; j < jl; j += 1) {
classesToCheck +=
"[contains(concat(' ', @class, ' '), ' " +
classes[j] +
" ')]";
}
try {
elements = document.evaluate(
".//" + tag + classesToCheck,
elm,
namespaceResolver,
0,
null
);
} catch (e) {
elements = document.evaluate(
".//" + tag + classesToCheck,
elm,
null,
0,
null
);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
} else {
getElementsByClassName = function(className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements =
tag === "*" && elm.all
? elm.all
: elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for (var k = 0, kl = classes.length; k < kl; k += 1) {
classesToCheck.push(
new RegExp("(^|\\s)" + classes[k] + "(\\s|$)")
);
}
for (var l = 0, ll = elements.length; l < ll; l += 1) {
current = elements[l];
match = false;
for (
var m = 0, ml = classesToCheck.length;
m < ml;
m += 1
) {
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
window.onload = function() {
// if (
// !document.getElementsByClassName ||
// !Element.getElementsByClassName
// ) {
// Element.getElementsByClassName = document.getElementsByClassName = function(
// className
// ) {
// var children = this.getElementsByTagName("*");
// var elements = new Array();
// for (var i = 0; i < children.length; i++) {
// var aClassName = children[i].className.split(" ");
// for (var j = 0; j < aClassName.length; j++) {
// if (aClassName[j] == className) {
// elements.push(children[i]);
// console.log(children[i]);
// break;
// }
// }
// }
// return elements;
// };
// }
// if (!document.getElementsByClassName||!window.frames.document.getElementsByClassName) {
// window.frames.document.getElementsByClassName = document.getElementsByClassName = function(className, element) {
// var children = (element || document).getElementsByTagName(
// "*"
// );
// var elements = new Array();
// for (var i = 0; i < children.length; i++) {
// var child = children[i];
// var classNames = child.className.split(" ");
// for (var j = 0; j < classNames.length; j++) {
// if (classNames[j] == className) {
// elements.push(child);
// break;
// }
// }
// }
// return elements;
// };
// }
var oTime = getElementsByClassName("time", "div", document)[0];
var aNum = getElementsByClassName("num", "img", document);
var oTimeDay = getElementsByClassName("num2", "img", oTime)[0];
var sCurrentDay = "";
function timeRunner() {
var oDate = new Date();
var stime =
toDouble(oDate.getFullYear()) +
toDouble(oDate.getMonth() + 1) +
toDouble(oDate.getDate()) +
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
for (var i = 0; i < stime.length; i++) {
aNum[i].src = "images/" + stime.charAt(i) + ".png";
}
sCurrentDay = num2Day(oDate.getDay());
oTimeDay.src = "images/" + sCurrentDay + ".png";
}
setInterval(timeRunner, 1000);
timeRunner();
};
</script>
</html>
```
# 無縫滾動
## offsetLeft(獲取物體左邊距)
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 200px;
top: 150px;
}
</style>
</head>
<body>
<div id="div1" onclick="alert(this.offsetLeft)"></div>
</body>
</html>
```
也可以實時計算
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 200px;
top: 150px;
margin: 50px;
}
</style>
</head>
<body>
<div id="div1" onclick="alert(this.offsetLeft)"></div>
</body>
</html>
```
點擊 div, 從左向右移動
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 200px;
top: 150px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onclick = function() {
setInterval(function() {
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
}, 30);
};
};
</script>
</html>
```
## 無縫滾動布局
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 1356px;
height: 195px;
margin: 200px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 339px;
height: 195px;
list-style: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
setInterval(function() {
oUl.style.left = oUl.offsetLeft - 2 + "px"; // 可左可右, 可快可慢...
}, 30);
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
</div>
</body>
</html>
```
現在的問題是, 向左移, 紅底出來了...
來兩個拼接...
```javascript
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
setInterval(function() {
oUl.style.left = oUl.offsetLeft - 2 + "px";
}, 30);
};
```
ul 變成了兩行...需要改變 ul 的 width...
```javascript
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
setInterval(function() {
oUl.style.left = oUl.offsetLeft - 2 + "px";
}, 30);
};
```
當滾完一半之后, 迅速拉回來...
```javascript
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
setInterval(function() {
console.log(oUl.offsetLeft);
console.log(-oUl.offsetWidth / 2);
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0";
}
oUl.style.left = oUl.offsetLeft - 2 + "px";
}, 30);
};
```
如果往右滾呢?
```javascript
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
setInterval(function() {
console.log(oUl.offsetLeft);
console.log(-oUl.offsetWidth / 2);
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0";
}
// oUl.style.left = oUl.offsetLeft - 2 + "px";
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + 2 + "px";
}, 30);
};
```
鼠標移入時, 暫停
```javascript
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
var timer = setInterval(function() {
console.log(oUl.offsetLeft);
console.log(-oUl.offsetWidth / 2);
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0";
}
// oUl.style.left = oUl.offsetLeft - 2 + "px";
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + 2 + "px";
}, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
};
```
鼠標移出時繼續...
```javascript
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
function move() {
console.log(oUl.offsetLeft);
console.log(-oUl.offsetWidth / 2);
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0";
}
// oUl.style.left = oUl.offsetLeft - 2 + "px";
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + 2 + "px";
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
};
```
點擊左按鈕, 向左跑, 點擊右按鈕, 向右跑
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 1356px;
height: 195px;
margin: 200px auto;
position: relative;
background: red;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 339px;
height: 195px;
list-style: none;
}
.btn_left {
display: block;
width: 68px;
height: 68px;
background: url(img/btn.jpg) no-repeat -70px -69px;
position: absolute;
top: 20px;
left: 1px;
z-index: 1;
}
.btn_left:hover {
background: url(img/btn.jpg) no-repeat -70px 0;
}
.btn_right {
display: block;
width: 68px;
height: 68px;
background: url(img/btn.jpg) no-repeat 1px -69px;
position: absolute;
top: 20px;
right: 0;
z-index: 1;
}
.btn_right:hover {
background: url(img/btn.jpg) no-repeat 1px 0;
}
.btn_left {
position: absolute;
top: 260px;
left: 190px;
}
.btn_right {
position: absolute;
top: 260px;
left: 1670px;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var oBtnLeft = document.getElementsByClassName("btn_left")[0];
var oBtnRight = document.getElementsByClassName("btn_right")[0];
var speed = -2;
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
function move() {
console.log(oUl.offsetLeft);
console.log(-oUl.offsetWidth / 2);
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0";
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + speed + "px";
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
oBtnLeft.onclick = function() {
speed = -2;
};
oBtnRight.onclick = function() {
speed = 2;
};
};
</script>
</head>
<body>
<a href="javascript:void(0);" class="btn_left"></a>
<a href="javascript:void(0);" class="btn_right"></a>
<div id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
</div>
</body>
</html>
```
# 小米輪播圖
- 每日單詞
- JavaScript 入門
- JavaScript 基礎
- JavaScript 基礎回顧
- JavaScript 函數
- 匿名函數,多維數組,數據類型轉換
- JavaScript 類型轉換, 變量作用域
- js 運算符(一)
- js 運算符(二)
- js 流程控制語句
- JavaScript 掃盲日
- JavaScript 牛刀小試(一)
- JavaScript 牛刀小試(二)
- JavaScript 再談函數
- JavaScript-BOM
- JavaScript-定時器(一)
- JavaScript-定時器(二)
- 番外-輪播圖源碼
- JavaScript 輪播圖和 DOM 簡介
- JavaScript-DOM 基礎-NODE 接口-屬性
- JavaScript-DOM 基礎-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 節點
- CSS 復習與擴展(一)
- CSS 復習與擴展(二)
- 走進 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高級
- jquery 備忘清單-1
- jquery 備忘清單-2
- 聊聊 json
- jquery 備忘清單-3