返回前面起第一個字符的位置
indexOf(“字符”);
它是從 前面開始數(shù)（從左邊開始數(shù)）宰僧， 而且只找第一個材彪， 然后返回改字符的位置， 索引號都是從0開始的琴儿。 返回的是個數(shù)值段化。
var txt = “abcdef”;
alert(txt.indexOf(“d”)) 結(jié)果就是 3
如果找不到該字符 返回 -1
返回后面起第一個字符的位置
lastIndexOf(索引字符串)
從后面開始數(shù)，返回的索引值還是從前面開始數(shù)的
例：
var str = "adsfgh";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//2
上面兩個結(jié)果都是2造成，但是如果str改為
var str = "adsfghsb";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//6
這個時候lastIndexOf返回的就是6了
網(wǎng)址編碼
我們知道一個網(wǎng)站自己的網(wǎng)址穗泵， 不同頁面也有自己id網(wǎng)址， 我們經(jīng)常會做一些谜疤， 把網(wǎng)址送入到后臺佃延。 但是后臺再處理的不認(rèn)識，比如換行啊等特殊符號的夷磕？
encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進行編碼
decodeURIComponent() 函數(shù)可把字符串作為 URI 組件進行解碼
例：
var url = "http://www.itast.cn?name=cz";
var encUrl = encodeURIComponent(url);
console.dir(encUrl);
console.dir(decodeURIComponent(encUrl));
結(jié)果：
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(“取字符串的起始位置”, [結(jié)束位置]) ;
[] 表示可選的參數(shù)
起始位置一定要有履肃，結(jié)束位置可以省略
var txt = “abcedf”;
txt.slice(3) ; 從 txt 里面字符的 第 3（索引號）個開始取 結(jié)束位置省略， 一直取到最后一個坐桩。
總結(jié):
-
slice(3)從第3個開始取尺棋，一直取到最后 -
slice(3,6)3：從 第3個開始取，6：取到第6索引號的位置绵跷，注意：是從左邊的第0個開始數(shù)膘螟。 但是不包 6 竿痰。 - 起始位置可以是負(fù)數(shù) 昼激， 如果是負(fù)數(shù)癣亚，則是從 右邊往左邊開始取看杭。
var txt =”asdf”;
txt.slice(-1) ;// 結(jié)果是 f
- slice(-1)肌厨；表示從右邊第一個開始到右邊最后一個
- slice(-5,-2)取劫；表示從右邊第五個開始到右邊最后二個祈坠，不包括第二個
substr()
substr(起始位置,[取的個數(shù)])
同上净薛。不寫取的個數(shù)像啼， 默認(rèn)從起始位置一直取到最后 俘闯。
取的個數(shù)： 是指從起始位置開始，往后面數(shù)幾個忽冻。
var txt = “abcdefghijk”;
txt.substr(3,4); //從第3個 （d） 開始 數(shù) 4個 defg
- substr(-1) ;少用真朗，因為 在IE6、7僧诚、8 報錯 遮婶。 盡量少用
- 兼容性的寫法 ：
str.substr(str.length-1,1);// 兼容的寫法
substring()
-
substring 同slice一樣的秀菱，但是有一點不同 -
substring(3,6)，substring 始終會把 小的值作為 起始位置 大的值作為結(jié)束位置
例如： substring(6,3) 實際中 自動變成 substring(3,6);
例：保留兩位小數(shù)
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 = [];//用于存放結(jié)果的數(shù)組
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>
無縫滾動
原理：首先先復(fù)制 兩張圖片 （第一張和第二張） 放到最后面 （本質(zhì)上是第 5.6張）
ul 是盒子移動的蹭睡， 如果ul 的left 值 大于等于 4張圖片的寬度衍菱，就應(yīng)該快速復(fù)原為0 。
例：循環(huán)勻速無縫滾動
<!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;//目標(biāo)位置就是用當(dāng)前索引乘以盒子寬度
}
}
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>
