JS 篇（7）
复习JS(6)：
1.按钮不可用:disabled = “disabled”||true
2.setTimeout 只执行一次 setInerval执行很多次
3.递归调用：函数自身的调用，不提倡用函数名，而是arguments.callee，返回的是正在执行的函数本身
4.根据位置返回字符
charAt（索引号）；
charCodeAt(索引号)；
1.根据字符返回位置
①返回前面起第一个字符的位置：indexOf(“字符”)
从左边开始数，而且只找第一个，返回该字符的位置，索引号都是从0开始的；如果找不到就返回-1
②返回后面起第一个字符的位置：lastIndexOf(参数：索引字符串)
注意：返回的值还是从左边开始数的索引号
2.网址编码
将网址传入后台前要先实现编码，避免出现后台不认识的特殊符号
encodeURIComponent()函数可把字符串作为URI 组件进行编码
dencodeURIComponent()函数可把字符串作为URI 组件进行解码
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码结果：
3.操作字符串
3.1concat()连接字符串
var txt1 = “456”;
var txt2 = ”ger”;
console.log(txt1.concat(txt2)); 结果： “456ger”
3.2取字符串
3.2.1 slice()
slice(“取字符串的起始位置”，[结束位置])；
注意;[结束位置]是可有可无的，但是起始位置一定要有
例如：var txt = “abcedf”;
txt.slice(3) 从 txt 里面字符的 第 3（索引号）个开始取， 结束位置省略， 一直取到最后一个。
slice(3,6) 从 第3个开始取，取到第6索引号的位置，还是从左边的第0个开始数，但是不包 6 。
起始位置可以是负数，如果是负数，则是从右边往左边开始取。
例如： var txt =”asdf”;
txt.slice(-1) 结果是 f
3.2.2substr()
substr(起始位置，[取的个数])
用法同slice
ubstr(-1) 尽量少用 ，ie678 报错 。
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法substring 同slice用法相同，但是有一点不同
substring 始终会把小的值作为起始位置，大的值作为结束位置
例如： substring(6,3) 实际中 自动变成 substring(3,6);
保留小数位数
保留两位小数的三种写法：
1.通过 indexOf 返回小数点的位置 截取字符串
console.log(str.substr(0,str.indexOf(".")+3));- 先乘以100 取整然后除以100
console.log(parseInt(PI*100) /100);3.pi.toFixed(2) 保留2位小数
console.log(PI.toFixed(2));验证文件格式是否正确
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<input type="file" name="" id="File"/><span>span>
body>
html>
<script>
var file = document.getElementById("File");
file.onchange = function() {
//alert(11);
//alert(this.value); // c:/adfasdf.ss.jpg 需要点 从后面开始 再字符串中的位置
var path = this.value; // 得到的是现在的文件路径
var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase()
// 得到的是 后缀名 并且转换为大写
//alert(suxxif);
if(suxxif == ".JPG" || suxxif == ".PNG")
{
this.nextSibling.innerHTML = "格式正确";
}
else
{
this.nextSibling.innerHTML = "格式错误的";
}
}
script>$符号的封装
<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>
// $("#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"blue" ;
}
script>无缝滚动
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{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>
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>
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var timer = null; // 定时器
var num = 0;
timer = setInterval(autoPlay,5);
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>匀速运动
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
.box {
position: absolute;
top:100px;
left:0;
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<button id="btn">开始button>
<div class="box" id="bOX">
div>
body>
html>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("bOX");
var num = 0;
var timer = null;
btn.onclick = function() {
timer = setInterval(function(){
num++;
if(num >=500)
{
clearInterval(timer);
}
else
{
box.style.left = num + "px";
}
},10)
}
script>缓动动画
一个盒子的初始值是0，要走到400px的位置 初始值leader = 0,target = 400;
leader = leader + (target - leader )/10;
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
.box {
position: absolute;
top:100px;
left:0;
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<button id="btn">开始button>
<div class="box" id="bOX">div>
body>
html>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("bOX");
var timer = null;
var leader = 0;
var target = 500;
btn.onclick = function() {
setInterval(function(){
leader = leader + (target - leader )/10;
box.style.left = leader + "px";
},30)
}
script>焦点图
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<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;
}
.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>
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">1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ol>
div>
body>
html>
<script>
var jd = document.getElementById("jd");
var ul = jd.children[0].children[0];
var ol = jd.children[1];
var olLis = ol.children;
var leader = 0, target = 0; // target 目标位置
for(var i=0; i// 每个li 的索引号
olLis[i].onmouseover = function() {
for(var j=0;j"";
}
this.className = "current";
target = -this.index * 490; // 目标位置 就是用当前的索引号乘以 一个盒子的宽度
}
}
setInterval(function() {
leader = leader + (target - leader ) / 10;
ul.style.left = leader + "px";
},30);
script> 
左右轮播图
<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,target = 0;
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>