[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