返回前面起第一个字符的位置
indexOf(“字符”);
它是从 前面开始数（从左边开始数）， 而且只找第一个， 然后返回改字符的位置， 索引号都是从0开始的。 返回的是个数值。
var txt = “abcdef”;
alert(txt.indexOf(“d”)) 结果就是 3
如果找不到该字符 返回 -1
返回后面起第一个字符的位置
lastIndexOf(索引字符串)
从后面开始数，返回的索引值还是从前面开始数的
例：
var str = "adsfgh";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//2
上面两个结果都是2，但是如果str改为
var str = "adsfghsb";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//6
这个时候lastIndexOf返回的就是6了
网址编码
我们知道一个网站自己的网址， 不同页面也有自己id网址， 我们经常会做一些， 把网址送入到后台。 但是后台再处理的不认识，比如换行啊等特殊符号的？
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
例：
var url = "http://www.itast.cn?name=cz";
var encUrl = encodeURIComponent(url);
console.dir(encUrl);
console.dir(decodeURIComponent(encUrl));
结果：
http%3A%2F%2Fwww.itast.cn%3Fname%3Dcz
%E7%BC%96%E8%A7%A3%E7%A0%81.html:10 http://www.itast.cn?name=cz
操作字符串
- 合并字符串
- 取字符串
concat()
连接字符串
str1.concat(str2);
var txt1 = "abc";
var txt2 = "123";
console.log(txt1.concat(txt2));// "abc123";
slice()
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
- slice(-1)；表示从右边第一个开始到右边最后一个
- slice(-5,-2)；表示从右边第五个开始到右边最后二个，不包括第二个
substr()
substr(起始位置,[取的个数])
同上。不写取的个数， 默认从起始位置一直取到最后 。
取的个数： 是指从起始位置开始，往后面数几个。
var txt = “abcdefghijk”;
txt.substr(3,4); //从第3个 （d） 开始 数 4个 defg
- substr(-1) ;少用，因为 在IE6、7、8 报错 。 尽量少用
- 兼容性的写法 ：
str.substr(str.length-1,1);// 兼容的写法
substring()
-
substring 同slice一样的，但是有一点不同 -
substring(3,6)，substring 始终会把 小的值作为 起始位置 大的值作为结束位置
例如： substring(6,3) 实际中 自动变成 substring(3,6);
例：保留两位小数
var PI = 3.1415926;
var str = PI+"";
var index = str.indexOf(".");
var sub = str.substr(0,index+3);
console.dir(sub);//3.14
console.dir(parseFloat(sub));//3.14
例：判断文件格式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var file = document.getElementById("mwfile");
file.onchange = function () {
var fileName = file.value;
var index = fileName.lastIndexOf(".");
var subfix = fileName.substr(index).toUpperCase();
if(subfix == ".JPG" || subfix == ".PNG"){
this.nextSibling.innerHTML = "格式正确";
}else{
this.nextSibling.innerHTML = "格式错误";
}
}
}
</script>
</head>
<body>
<input type="file" id="mwfile"/><span></span>
</body>
</html>
例：初步封装Jquery的$选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
</style>
</head>
<body>
<div id="demo"></div>
<div></div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
//封装自己的Class选择器
function getByClass(className) {
var arr = [];//用于存放结果的数组
if (document.getElementsByClassName) {//浏览器支持
arr = document.getElementsByClassName(className);
} else {
var doms = document.getElementsByTagName("*");
console.dir(doms.length);
for (var i = 0; i < doms.length; i++) {
var classArr = doms[i].className.split(" ");//以空格切割
for(var j=0;j<classArr.length;j++){
if(classArr[j] == className){
arr.push(doms[i]);
}
}
}
}
return arr;
}
function $(str){
var type = str.charAt(0);
var flag = str.substr(1);
switch(type){
case "#":
return document.getElementById(flag);
case ".":
return getByClass(flag);
default :
return document.getElementsByTagName(str);
}
}
// $("div").style.backgroundColor = "pink";
$("#demo").style.background = "purple";
</script>
</body>
</html>
无缝滚动
原理：首先先复制 两张图片 （第一张和第二张） 放到最后面 （本质上是第 5.6张）
ul 是盒子移动的， 如果ul 的left 值 大于等于 4张图片的宽度，就应该快速复原为0 。
例：循环匀速无缝滚动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.box{
width: 600px;
height: 200px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.box ul{
width: 1800px;
position: absolute;
}
.box ul li{
float: left;
}
</style>
<script type="text/javascript">
window.onload = function () {
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var num = 0;
var timer = null;
function animatorPlay(){
num--;
num = num >= -1200?num:0;
ul.style.left = num+"px";
}
timer = setInterval(animatorPlay,20);
scroll.onmouseover = function () {//停止动画
clearInterval(timer);
}
scroll.onmouseout = function () {//开启动画
timer = setInterval(animatorPlay,20);
}
}
</script>
</head>
<body>
<div class="box" id="scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
动画
- 匀速动画
匀速动画，看起来效果太简单。
等差序列 : 2 4 6 8 10 - 缓动动画公式:
一个盒子初始值是0，要走到 400 px 的位置，假如说，初始值 leader：0 ，target：400
box.style.left = xxxx + “px”
leader = leader + (target - leader ) /10 ;
10表示步长
例：缓动动画，先快后慢
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementById("box");
var leader = 0;
var target = 500;
var timer = null;
btn.onclick = function () {
timer = setInterval(function () {
if((target-leader)<0.005){
leader = target;
clearInterval(timer);
}
leader = leader+(target-leader)/20;
div.style.left = leader+"px";
console.log(leader);
},50);
}
}
</script>
</head>
<body>
<button>开始</button>
<div class="box" id="box"></div>
</body>
</html>
例：轮播图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>焦点图</title>
<style type="text/css">
body,ol,ul,li{
margin: 0;
padding: 0;
}
ol,ul,li{
list-style: none;
}
img{
/*清除图片底部3px的间隙*/
/*方式一*/
/*border: 0 none;*/
/*vertical-align: middle;*/
/*方式二*/
display: block;
}
.slider{
width: 490px;
height: 170px;
border: 1px solid #999;
margin: 100px auto;
padding: 5px;
position: relative;
}
.inner{
width: 100%;
height: 100%;
/*background-color: pink;*/
overflow: hidden;
position: relative;
}
.inner ul{
width: 1000%;
position: absolute;
left: 0;
top: 0;
}
.inner li{
float: left;
}
.slider ol{
position: absolute;
left: 35%;
bottom: 10px;
}
.slider ol li{
float: left;
background-color: #666;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
margin-left: 5px;
border-radius: 12px;
color: #fff;
}
.slider ol li.current{
background-color: #eee;
color: #333;
}
</style>
<script type="text/javascript">
window.onload = function () {
var slider = document.getElementById("slider");
var ul = slider.children[0].children[0];
var ol = slider.children[1];
var olis = ol.children;
var leader=0,target = 0;
for(var i = 0;i<olis.length ;i++){
var oli = olis[i];
oli.index = i;
oli.onmouseover = function () {
for(var j=0 ; j<olis.length ; j++){
olis[j].className = "";
}
this.className = "current";
target = -this.index*490;//目标位置就是用当前索引乘以盒子宽度
}
}
function PhotoAnimation(){
leader = leader+(target - leader)/20;
ul.style.left = leader+"px";
}
setInterval(PhotoAnimation , 20);
}
</script>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
例：左右点击轮播
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
img{
/*清除图片底部3px的间隙*/
/*方式一*/
/*border: 0 none;*/
/*vertical-align: middle;*/
/*方式二*/
display: block;
}
.slider{
width: 520px;
height: 280px;
border: 1px solid #999;
margin: 100px auto;
padding: 5px;
position: relative;
}
.inner{
width: 100%;
height: 100%;
/*background-color: pink;*/
overflow: hidden;
position: relative;
}
.inner ul{
width: 1000%;
position: absolute;
left: 0;
top: 0;
}
.inner li{
float: left;
}
.slider a{
position: absolute;
width: 40px;
height: 70px;
font: 500 40px/70px "simsun";
text-align: center;
top: 100px;
color: #999;
}
.slider .left{
left: 0;
}
.slider .right{
right: 0;
}
.slider a:hover{
background-color: rgba(0,0,0,.2);
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id){return document.getElementById(id);}
var slider = document.getElementById("slider");
var ul = slider.children[0].children[0];
var leader = 0,target = 0;
$("left").onclick = function () {
target<=-520*4?-520*4:target -= 520;//边界检测
}
$("right").onclick = function () {
target>=0?0:target += 520;//边界检测
}
function PhotoAnimation(){
leader = leader+(target - leader)/20;
ul.style.left = leader+"px";
}
setInterval(PhotoAnimation , 20);
}
</script>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:;" class="left" id="left"> > </a>
<a href="javascript:;" class="right" id="right"> < </a>
</div>
</body>
</html>
