一、根據字符返回位置
跟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);
