返回前面起第一个字符位置
indexOf(“sdfsdf”);它是从左边索引为0开始数，而且只找第一个，然后返回该字符的位置。返回是个数值。如果找不到该字符，那么就会返回-1。
返回后面起第一个字符位置
lastIndexOf(“sdfsdf”);它是从左边索引为0开始数，只找最后一个的字符位置。返回的是数值。
操作字符串（合并字符串、取字符串）
concat()连接字符串
var txt1 = “abc”;
var txt2 = ”123”;
console.log(txt1.concat(txt2)); “abc123”;
slice()
slice(“字符串的起始位置”, [结束位置]) ; [] 可写可不写，若不写直接取到最后，得到的是字符串。
slice(3,6) 3是从索引号3开始取；6是取到第6索引号的位置，还是从左边的第0个开始数。 但是不包含索引号6的字符。
起始位置可以是负数，如果是负数，则是从右边往左边开始取。
var txt =”asdf”;
txt.slice(-1) 结果是f
substr(起始位置，[取的个数]);若不写[],那么默认取到最后。如果写的话从当前位置往后取多少。得到的是字符串
var txt = “abcdefghijk”;
txt.substr(3,4);
从第3个 （d） 开始 数 4个 defg
substr(-1) 少用 ie678 报错 。 尽量少用
取最后一个的方法：因为索引号长度比它本身少一个，所以要减1
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法
substring 同slice一样的，但是有一点不同。substring 始终会把小的值作为起始位置，大的值作为结束位置。得到的是字符串。
保留小数位数
122340.12345 保留两位有效小数 122340.12
substr(0, .+3)
1.console.log(str.substr(0,str.indexOf(".")+3));
通过 indexOf 返回小数点的位置 截取字符串
2 console.log(parseInt(PI*100) /100);
先乘以100 取整 然后 除以100
3 console.log(PI.toFixed(2));
pi.toFixed(2) 保留 2位 小数
网页编码
我们知道一个网址 自己的网址， 不同页面也有自己id网址， 我们经常会做一些， 把网址送入到后台。 但是后台再处理的 不认识比如 换行啊 等特殊符号的 ？
var url = “http://www.itast.cn?name=cz”
所以我们要实现编码，然后再传到后台。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
上传正确格式文件案例
<script>
var file = document.getElementById("File");
file.onchange = function() {
var path = this.value;
var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
if(suxxif == ".JPG"||suxxif==".PNG")
{
this.nextSibling.innerHTML="格式正确";
}
else
{
this.nextSibling.innerHTML="格式不正确";
}
}
</script>
$ 仿jquery选择器案例
这个重点的意思是，在前面我们做了class类的封装，然后最后可以直接调用来控制样式。那么我们通常会见到jq里面$("#demo") $(".one") $("div")这几种，那么如何统一封装一个类，然后直接进行调用呢？就需要把#、.与后面的类名分开，然后判断如果为#，直接调用后面的类名，如果为.那么使用前面封装好的class进行控制。如果什么都没有的话，直接使用这个类名。最后使用的时候可以直接调用，案例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="demo"></div>
<div></div>
<div></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>
</body>
</html>
<script>
//function $(id) {return document.getElementById(id)} //id选择器 function getClass(classname) // 类的写法
{
//判断支持否
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = []; //用于返回 数组
var dom = document.getElementsByTagName("*");
for(var i=0;i<dom.length;i++) // 遍历所有的 盒子
{
var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
// ["demo","test"];
for(var j=0;j<txtarr.length;j++) // 遍历 通过类名分割的数组
{
if(txtarr[j] == classname)
{
arr.push(dom[i]); // 我们要的是 div
}
}
}
return arr;
} // $("#demo") $(".one") $("div")
//封装自己的$
function $(str) {
var s = str.charAt(0); // 一个s 的变量 存放是 符号 # .
var ss = str.substr(1); // demo
switch(s)
{
case "#":
return document.getElementById(ss);
break;
case ".":
return getClass(ss);
break;
default :
return document.getElementsByTagName(str);
}
} $("#demo").style.backgroundColor = "purple";
$("#last").style.backgroundColor = "purple";
var test = $(".one");
for(var i=0;i<test.length;i++)
{
test[i].style.backgroundColor = "blue";
} </script>
无缝滚动案例
原理：一个大盒子里面包着一个盒子，盒子的宽可以设为1000%，大盒子设置overflow: hidden;然后再这个盒子里放图，如果原本有4张图，那么就要放6张图，4张原图，第四第五张图为第一第二张图。这个盒子里可以显示2张图，那么当走到第5张和第6张出现的时候，要设定定时器setInterval，当走过第四张图，第五张图到达位置的时候立即设定左的位置是0，也就是返回到第一张图，由于切换速度很快，人们根本看不出来，所以会有无缝滚动的效果。其次当鼠标移到图片上时，要清理定时器，当鼠标移 开的时候，定时器要继续。
ul 是盒子移动的， 如果ul 的left 值 大于等于 4张图片的宽度，就应该快速复原为0 。
<style>/*注意CSS*/
*{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>
<script>
window.onload = function() {
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var timer = "";
var num = 0;
timer = setInterval(autoPlay,20);
function autoPlay() {
num--;
num<=-1200 ? num=0 : num ;
ul.style.left = num +"px";
}
scroll.onmouseover = function() {
clearInterval(timer);
}
scroll.onmouseout = function() {
timer = setInterval(autoPlay,20);
}
}
</script>
</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>
window.onload = function() {
var bx =document.getElementById("bx");
var btn = document.getElementById("btn");
var num = 0;
var timer = "";
btn.onclick = function() {
timer = setInterval(function(){
num++;
num<=500 ? num : clearInterval(timer);
bx.style.left = num +"px";
},10);
}
}
</script>
缓速动画
缓动动画公式:
一个盒子初始值 是 0 要走到 400 px 的位置
假如说，初始值 leader 0 target 400
box.style.left = xxxx + “px”
leader = leader + (target - leader ) /10 ;
<script>
window.onload = function() {
var bx = document.getElementById("bx");
var btn = document.getElementById("btn");
var timer = "";
var leader = 0;
var target = 500;
btn.onclick = function() {
timer = setInterval(function(){
leader = leader+(target - leader )/50;
bx.style.left = leader + "px";
},10); }
}
</script>
自己创建节点方面暂时不是重点，我们先要把布局机理搞清楚，以后再加。
轮播焦点图案例
<style>/*布局重点*/
*{margin: 0; padding: 0;}
ul,ol{list-style:none;}
img {
display: block; /* 清除图片底册 3像素缝隙*/
}
.slider {
width: 490px;
height: 170px;
border:1px solid #ccc;
margin: 100px auto;
padding:5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
margin-left: -80px;
bottom: 10px; }
.slider ol li{
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}
</style>
<script>
window.onload = function() {
var jd = document.getElementById("jd");
var ul = jd.children[0].children[0];
var ol = jd.children[1];
var ollis = ol.children;
var leader = 0;
var target =0;
for(var i=0;i<ollis.length;i++)
{
ollis[i].index = i;
ollis[i].onmouseover = function(){
for(var j=0;j<ollis.length;j++)
{
ollis[j].className = "";
}
this.className = "current";
target = -this.index*490;
}
}
setInterval(function() {
leader = leader+(target-leader)/20;
ul.style.left = leader+"px";
},30);
}
</script>
</head>
<body>
<div class="slider" id="jd">
<div class="inner">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
</ul>
</div>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
左右焦点图案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,ul,ol,li,img{margin:0;padding:0;list-style:none;}
#box{width:490px;height:170px;padding:5px;
position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
.ad{width:490px;height:170px;overflow:hidden;position:relative;}
#box img{width:490px;}
.ad ol{position:absolute;right:10px;bottom:10px;}
.ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;}
.ad ol li.current{background:yellow;}
.ad ul li{float:left;}
.ad ul{ position:absolute; top:0; width:2940px;}
.ad ul li.current{display:block;}
#arr {
display: none;}
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
#arr #right{right:5px; left:auto;}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
<script>
function $(id){return document.getElementById(id);}
var box = document.getElementById("box");
box.onmouseover = function() {
$("arr").style.display= "block";
}
box.onmouseout = function(){
$("arr").style.display = "none";
}
$("right").onclick = function() {
target-=490;
}
$("left").onclick = function() {
target+=490;
}
var leader = 0;
var target = 0;
var timer = "";
setInterval(function(){
if(target >= 0)
{
target =0;
}
else if(target<=-1960)
{
target = -1960;
}
leader = leader+(target-leader)/10;
$("imgs").style.left = leader +"px";
},30);
</script>