1、
- 按钮不可用 disabled = “disabled” || true
- setTimeout 只执行一次 setInterval 执行很多次
- 递归调用 ： 函数自己调用自己 函数递归调用 不提倡用函数名 而喜欢用的是 arguments.callee 返回的是 正在执行的函数 本身
- 逻辑运算符 与 && 或 || 非 ！ ! > && > ||
- 2&&0 0 1&&8 0&&3 0 1||0
- 转换为 字符型
var num = 12345;
num+ “”
String(num);
num.toString(); 10进制
num.toString(2) 二进制 - 根据字符位置返回字符
charAt(索引号)
var txt = “abcde”;
txt.charAt(3); d
charCodeAt(3) unicode 编码 97 100
跟 charAt() 相反的 根据 字符 返回的是 位置
indexOf(“字符”);
它是从 前面开始数（从左边开始数）， 而且只找第一个， 然后返回改字符的位置， 索引号都是从0开始的。 返回的是个数值。
var txt = “abcdef”;
alert(txt.indexOf(“d”)) 结果就是 3
如果找不到该字符 返回 -1
lastIndexOf(参数：索引字符串)
从后面开始数 同上
var txt = “abcdef” ;
txt.lastIndexOf(“d”); 3
返回的值，还是从 左边开始 数的 索引号 。
我们知道一个网址 自己的网址， 不同页面也有自己id网址， 我们经常会做一些， 把网址送入到后台。 但是后台再处理的 不认识比如 换行啊 等特殊符号的 ？
var url = “http://www.itast.cn?name=cz”
所以我们要实现编码，然后再传到后台。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码
</script>-
-
- concat() 连接字符串
-
var txt1 = “abc”;
var txt2 = ”123”;
console.log(txt1.concat(txt2)); “abc123”;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var div1 = document.getElementById("div1").innerHTML;
var div2 = document.getElementById("div2").innerHTML;
function onBtnClick(id,txt) { //这里就是点击获取一些ID，然后第二个参数就是要进行什么样的操作。就是操作字符串来着意思
document.getElementById(id).onclick = function() { //这里就是找事件的调用者来着，还有就是查找那个ID，然后点击输出
this.nextSibling.innerHTML = txt;
}
}
onBtnClick("btn1",div1.concat(div2)); //这里主要看你送的是什么值，然后就是在什么的函数进行输出来，那个concat的就是两个按钮连接的意思
}
</script>
</head>
<body>
<div id="div1">my name is andy!</div>
<div id="div2">what's your name?</div>
<button id="btn1">concat()</button><span></span> <br />
</body>
</html>
slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的
起始位置一定要有 结束位置可以省略
var txt = “abcedf”;
txt.slice(3) ; 从 txt 里面字符的 第 3（索引号）个开始取 结束位置省略， 一直取到最后一个。
总结 slice(3) 从第3个开始取，一直取到最后
slice(3,6) 3 从 第3个开始 取 6 取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
起始位置可以是负数 ， 如果是负数，则是从 右边往左边开始取。
var txt =”asdf”;
txt.slice(-1) 结果是 f
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var div1 = document.getElementById("div1").innerHTML;
var div2 = document.getElementById("div2").innerHTML;
function onBtnClick(id,txt) {
document.getElementById(id).onclick = function() {
this.nextSibling.innerHTML = txt;
//他的下一个兄弟 内容变成 txt
}
}
onBtnClick("btn1",div1.concat(div2));
onBtnClick("btn2",div1.slice(3)); // 从第3个开始取，一直取到最后
onBtnClick("btn3",div1.slice(3,6)); // 3 从 第3个开始 取 6 取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
onBtnClick("btn4",div1.slice(-1)); // 从右边开始取
//substr组
onBtnClick("btn5",div1.substr(3)); //
onBtnClick("btn6",div1.substr(3,6)); //
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法
// substring 组
onBtnClick("btn8",div1.slice(6,3));
onBtnClick("btn9",div1.substring(6,3));
}
</script>
</head>
<body>
<div id="div1">my name is andy!</div>
<div id="div2">what's your name?</div>
<button id="btn1">concat</button><span></span> <br/>
<button id="btn2">slice(3)</button><span></span> <br/>
<button id="btn3">slice(3,6)</button><span></span> <br/>
<button id="btn4">slice(-1)</button><span></span> <br/>
<button id="btn5">substr(3)</button><span></span> <br/>
<button id="btn6">substr(3，6)</button><span></span> <br/>
<button id="btn7">substr(-1) 兼容</button><span></span> <br/>
区别
<button id="btn8">slice(6,3)</button><span></span> <br/>
<button id="btn9">substring(6,3)</button><span></span> <br/>substr(起始位置,[取的个数])
同上。
不写取的个数， 默认从起始位置一直取到最后 。
取的个数： 是指从起始位置开始，往后面数几个。
var txt = “abcdefghijk”;
txt.substr(3,4);
从第3个 （d） 开始 数 4个 defg
substr(-1) 少用 ie678 报错 。 尽量少用
兼容性的写法 ：
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法
substring 同slice 一样的 但是有一点不同
substring(3,6)
substring 始终会把 小的值作为 起始位置 大的值作为结束位置
例如： substring(6,3) 实际中 自动变成 substring(3,6);
原理：
首先先复制 两张图片 （第一张和第二张） 放到最后面 （本质上是第 5.6张）
ul 是盒子移动的， 如果ul 的left 值 大于等于 4张图片的宽度，就应该快速复原为0 。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img {vertical-align: top; } /*取消图片底部3像素距离*/
.box {
width: 600px;
height: 200px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 400%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="scroll">
<ul>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
<li><img src="images/03.jpg" alt=""/></li>
<li><img src="images/04.jpg" alt=""/></li>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
<script>
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var num = 0; //控制左侧值 left
var timer = null; // 定时器
timer = setInterval(autoPlay,20);
function autoPlay() {
num--;
//console.log(num);
num<=-1200 ? num = 0 : num;
ul.style.left = num + "px";
}
scroll.onmouseover = function() { // 鼠标经过大盒子 停止定时器
clearInterval(timer);
}
scroll.onmouseout = function() {
timer = setInterval(autoPlay,20); // 开启定时器
}
</script>