一、根据字符返回位置
跟charAt() 相反根据位置返回字符
indexOf(“字符”);找不到返回-1，索引号从0开始 。
lastIndexOf(参数：索引字符串) 从后面开始找，返回的值是从前往后数的。
二、网址编码
一个网址有自己的网址， 不同页面都有自己id网址， 我们把网址送入到后台，但是后台再处理的时候不认识比如换行等特殊符号的 ？ 所以我们要实现编码，然后再传到后台。
- encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码
三、操作字符串
- 合并字符串
concat()
<script type="text/javascript">
window.onload = function () {
function $(id){return document.getElementById(id).innerHTML;}
function ctt(id,txt){
document.getElementById(id).onclick = function(){
this.nextSibling.innerHTML = txt; //忽略了要加的文字要放在btn的兄弟节点span中
}
}
ctt("btn",$("div1").concat($("div2")));//error：btn是上面的id 要加引号、函数名打错了
}
- 取字符串
- slice()
slice(取字符串的起始位置, [结束位置]) ; []是可选的,起始位置一定要有，结束位置可以省略。
var txt = “abcedfgh ”; txt.slice(3) ;edfgh
从 txt 里面字符的 第 3（索引号）个开始取，结束位置省略，一直取到最后一个。
slice(3,6)edf
从 第3个开始取，取到第6索引号的位置，还是从左边的第0个开始数。但是不包括6，取到第6号的意思！
slice（-1）f
起始位置可以是负数，意思是从右往左开始取第一个。 - substr()
substr(起始位置,[取的个数]) 同上。
不写取的个数: 默认从起始位置一直取到最后 。
取的个数：是指从起始位置开始，往后面数几个。
var txt = “abcdefghijk”;
txt.substr(3,4); //defg
从第3个（d） 开始取4个数。
substr(-1) 少用，ie678会报错。
兼容性的写法 ：
onBtnClick("btn",div1.substr(div1.length-1,1)); // 兼容的写法，取最后一个
- substring()
和slice一样的，但是有一点不同
substring(3,6)
substring 始终会把小的值作为起始位置,大的值作为结束位置。
例如： substring(6,3) 实际中 自动变成 substring(3,6);
四、保留小数位数
122340.12345 保留两位有效小数 122340.12 | substr(0, .+3)
-
console.log(str.substr(0,str.indexOf(".")+3));
通过 indexOf返回小数点的位置，再截取字符（要转换为字符串，数字不能进行比较） -
var PI = 123.123456 ;console.log(parseInt(PI*100) /100);
先乘以100取整,再除以100 （如果是三位就变成1000） -
console.log(PI.toFixed(2));
保留 2位 小数
- 得到上传文件格式小实例
<script type="text/javascript">
window.onload = function () {
var file = document.getElementById("file");
file.onchange = function(){
var path = this.value;
var typ = path.substr(path.lastIndexOf("."));
alert(typ);
}
//error：先获取当前文件的路径，通过路径索引substr方法和文件后缀！
}
</script>
- 大小写转换
- toUpperCase，转换为大写（参数： 无）
- toLowerCase，转换为小写（参数：无）
asdf.toUpperCase()结果就是： ASDF
$("txt").value.toUpperCase();
substr(path.lastIndexOf(".")).toUpperCase();
五、无缝滚动
思路：一开始显示两张图，那么就先滚动所有图之后再加上开始两张图在最后，滚动结束left的值回到开始，但是前面的滚动结束也是显示前两张。
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];//获取第一个孩子ul
var num = 0;
var timer = null;
timer = setInterval(gun,20);
function gun(){
num--;
num<=-1200?num = 0:num; //如果超过了四张图的宽度就回到前两张
ul.style.left = num +"px";
}
scroll.onmouseover = function(){
clearInterval(timer);
}
scroll.onmouseout = function(){
timer = setInterval(gun,20);
//使定时器的速度从头开始,上一个定时器timer已经被清了，
如果不用timer = ，没名字再放上鼠标还是清不掉
}
六、匀速运动
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var num = 0;
btn.onclick = function(){
var timer = null;
timer = setInterval(function(){
num++;
if(num>=500){
clearInterval(timer);
}
else {
box.style.left = num+"px";
}
},50)
}
七、缓动动画
- 等差数列
一个盒子初始值是0，要走到 400px的位置
leader 0 target 400
box.style.left = xxxx + “px”
leader = leader + (target - leader ) /10 ;可以实现减速效果
八、焦点图和左右轮播图（需要缓动动画）
鼠标滑过序号出现图片的轮播图：
获取每个圆点的索引值，鼠标滑过类名变为当前（修改圆点样式），target值变成当前索引值*宽度。
var dd = document.getElementById("dd");
var ul = dd.children[0].children[0];
var ol = dd.children[1];
var lis = ol.children;
var leader = 0,target = 0;
for(var i = 0 ;i <lis.length; i++) {
lis[i].index = i;
lis[i].onmouseover = function(){
for(var j= 0; j <lis.length;j++){
lis[j].className = "";
}
this.className="current";
target = -this.index *490;
}
}
setInterval(function(){
leader = leader + (target - leader) / 10;
ul.style.left = leader+"px";
},30);
左右轮播图，左右箭头，鼠标滑过显示，滑出隐藏。
点击left向左移动一个宽度，<=0时设置=0；防止左边溢出，>=四个宽度时 =四个宽度，防止右边溢出。
function $(id){
return document.getElementById(id);
}
$("dd").onmouseover = function(){
$("jiantou").style.display = "block";
}
$("dd").onmouseout = function(){
$("jiantou").style.display = "none";
}
$("right").onclick = function(){
target -= 520;
}
$("left").onclick = function(){
target += 520;
}
var leader=0,target = 0;
setInterval(function(){
if (target>=0) {
target = 0;
}
else if(target<=-2080){
target=-2080;
}
leader = leader + (target - leader) / 10;
$("imgs").style.left = leader+"px";
},30);
