1.日期对象
- 内置对象,JS中有很多内置对象 Math Array Date Vue
- var date=new Date();// 调用的是系统时间,如果运行程序的电脑时间改了,获取到的时间也会跟着变
- getTime,获得到的毫秒数
- 1秒等于1000毫秒
- 从1970年至今的毫秒数
- 2038年问题
- getFullYear,获取年份 当前年份
- getMonth,获取月份 0-11月
- getDate,获取几号 1-31号
- getDay,获取星期几 0-6
- getHours,获取时
- getMinutes,获取分
- getSeconds,获取秒
2.定时器
- window.setInterval(执行函数,间隔时间);//间隔时间必须是毫秒;window可省略。
- 注意:第一个参数必须是一个函数,可传入函数名,但是不能加括号。
- setTimeout(函数,间隔时间);
- 这个定时器是间隔时间之后执行函数,只执行一次,和定时炸弹类似
- setInterval定时器是每间隔多少秒就执行一次,一直循环,除非清除定时器
- 案例:5s之后页面自动跳转
- window.location.href=“url”;//BOM里面内容
- setTimeout可以实现倒计时
3.arguments
- arguments.length 实参个数
- argument.callee 代表当前执行的函数
函数自己调用自己可以使用arguments.callee来替代 - 递归的典型案例——斐波那契数列 1 1 2 3 5 8 13 21
4.运算符
- 一元运算符 正号、符号、++、–
- 二元运算符 +、-、*、/、%
- 三元运算符 表达式?真:假
- 逻辑运算符 &&、||、!
- 关系运算符 >、<、>=、<=、==、===、!=、!==
- 优先级顺序
- ()括号
- !非、-符号++、–
- *、/、%
- +、-
- >、<、>=、<=
- ==、===、!=、!==
- &&
- ||
- 三元运算符
- 五种假:0、null、undefined、""、false
- &&:同真为真;
- ||:同假为假;
var a = 2 && 4 || 3 ;//返回4
var b = 0 && 3 || 4 ;//返回4
var c= 0 && 1 || 3 && 4;//返回4
var d = 4 && 5 && 6 ;//返回6
5.数值转字符串
- String() 它的参数是字符串
var str=123;
String(str);//返回的是字符串的123
- +"" +起到字符串拼接作用
var str=123;
str+"";//返回的是字符串的123
- toString() 它的参数是基数,可以传2,8,10,16等进制数
var str=123;
str.toString(2);//返回的是字符串的二进制的123
6.检测字符串长度
- charAt(); (下标) 根据下标,返回对应的字符
- charCodeAt(); 根据下标,返回对应的字符编码
- length; 返回字符串长度
- 空格也算字符,一个字母对应的长度是1,汉字长度是2
- 但是length方法获取到的汉字长度是1,当成字母来处理,所以有问题
- 封装一个方法来处理这个汉字长度的问题,借助charCodeAt方法
- 一般英文字符字符编码在0~121之间
7.根据字符返回下标
- indexOf(); 找最前面的那个指定字符,找到就结束了
- lastIndexOf(); 找的是最后面的那个指定字符,找到就结束。但是也是从最前面开始计数。
- 查找结果返回-1,指的是没有找到指定字符。
8.网址编码及解码
- 编码encodeURICompent;
- 解码decodeURICompent;
9.字符串操作
- concat; 能进行数组及字符串的合并
- slice; 有两个参数,开始位置和结束位置。包含开始位置下标,但不包含结束位置下标。如果不传第二个参数,默认截取到结束。可以传负值,就是从最后面开始数负数的绝对值个数。
- substr; 两个参数,开始位置和截取长度。包含开始位置下标字符。类似于数组的splice。 文档中[ ]里面的是可选参数。
- 一般不要使用负数,在IE6、7、8中会出问题。
- substring; 两个参数,始终会以小的为开始位置,大的为截取长度,
对数值保留两位小数
- 方法一:toFixed(2); 数学里面提供的方法,对象必须是数字,有四舍五入。
- 方法二:数值乘100,取整,再除以100
- 方法三:sunstr(0,indexOf("."))
10.文件上传判断
- input中type="file"属性 HTML5中的表单新控件
- onchange事件
11.转换大小写
- toUpperCase
- toLowerCases
12.另一种获取元素方式
- querySelector HTML5中提供的方法,可以传span、.span、#span,只返回第一个元素。
- querySelectorAll 获取全部元素。
- IE8是兼容这两个方法的,可以放心使用
13.缓动公式
加速运动公式:leader=leader+(target-leader)/10;
- leader:起始位置
- target:目标位置
14.获取元素的尺寸
- 通过style是拿不到写在style样式表中尺寸信息的,只能用来添加行内样式,也只能获取行内样式数据,以字符串形式返回,比如:“200px”。
- offset:自己。offsetWidth、offsetHeight来获取样式表或行内的宽高信息。
- offsetWidth和offsetHeight能获取内容区和内边距、边框的累积尺寸。
- offsetWidth=width+padding+border。
- offsetLeft、offsetTop:找离自己最近的带有定位的父元素,如果父元素都没有添加定位,就找body。
- offsetLeft包含内边距、不包含边框。
- offsetParent:拿到的是离他最近的带有定位的父元素。tagName,拿到标签名,大写的。
15.event
- js是事件驱动的
- event事件对象
- 存在兼容问题,IE只认识window.event
- event事件对象属性
- clientX; 是以当前窗口、可视区为基准的。
- clientY;
- pageX; 是以整个文档为基准的。
- pageY;
- screenX; 是以电脑屏幕为基准的。
- screenY;
- onmouseover 鼠标经过元素,只触发一次
- onmousemove 鼠标移动,鼠标只要动就会触发事件
16.短信验证案例
- 单标签内容用value
- 双标签内容用innerHTML
- 在定时器中,this指向的是window
- 声明that或者_this变量存储this,后面就可以调用了
- 声明timer等于null,然后使用clearInterval清除定时器
- 用定时器一般都是先清除定时器
- disabled=“disabled” 按钮点击禁用
- 在定时器外面在单独调用一次函数,可以清除页面的短暂停留,能很好的过渡
17.新增属性
- text-shadow 文字阴影
- box-shadow 盒子阴影
1.简单日历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:500px;
height:500px;
margin:100px auto;
border:2px solid peru;
border-radius: 20px;
box-shadow: 5px 5px 5px #999;
overflow: hidden;
}
p{
height:100px;
width:500px;
text-align: center;
font-size:50px;
color:purple;
line-height: 100px;
text-shadow: 5px 5px 5px #999999;
}
#time{
width:500px;
height:50px;
background-color: skyblue;
text-align: center;
line-height: 50px;
font-size:20px;
text-shadow: 5px 5px 5px #999;
}
#week{
width:500px;
height:100px;
background-color: honeydew;
text-align: center;
line-height: 100px;
font-size:40px;
text-shadow: 5px 5px 5px #999;
}
#day{
width:500px;
height:250px;
background-color: gainsboro;
text-align: center;
line-height:250px;
font-size:60px;
text-shadow: 5px 5px 5px #999;
}
</style>
</head>
<body>
<div id="box">
<p>金牌日历</p>
<div id="time">
<span></span>
</div>
<div id="week">
<span></span>
</div>
<div id="day">
<span></span>
</div>
</div>
</body>
<script type="text/javascript">
var date=new Date();
var y=date.getFullYear();
var m=date.getMonth()+1;
var d=date.getDate();
var w=date.getDay();
var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var spans=document.getElementsByTagName("span");
spans[0].innerHTML=y+"年"+m+"月"+d+"日";
spans[1].innerHTML=arr[w];
spans[2].innerHTML=d+"号";
</script>
</html>
2.数字时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
display: block;
width:200px;
height:80px;
margin:100px auto;
border: 2px solid skyblue;
background-color:papayawhip;
border-radius: 10px;
text-align: center;
font-size:30px;
line-height: 80px;
letter-spacing: 5px;
color:red;
}
</style>
</head>
<body>
<span id="time"></span>
<script type="text/javascript">
var time=document.getElementById("time");
function timeShow(){
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
h<10?h="0"+h:h;
m<10?m="0"+m:m;
s<10?s="0"+s:s;
time.innerHTML=h+":"+m+":"+s;
}
setInterval(timeShow,1000);
</script>
</body>
</html>
3.倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
display: block;
width:500px;
height:50px;
margin:20px auto;
border: 2px solid skyblue;
background-color:papayawhip;
border-radius: 10px;
text-align: center;
font-size:24px;
line-height:50px;
letter-spacing: 5px;
color:red;
float:left;
}
</style>
</head>
<body>
<span>距离十月一号阅兵还有:</span>
<span id="time"></span>
<script type="text/javascript">
var time=document.getElementById("time");
function djs(){
var date1=new Date("2019/10/1 8:00:00");
var date2=new Date();
var hs=date1.getTime()-date2.getTime();
var df=hs/(1000*60*60*24);
var d=parseInt(df);
var hf=(df-d)*24;
var h=parseInt(hf);
var mf=(hf-h)*60;
var m=parseInt(mf);
var sf=(mf-m)*60;
var s=parseInt(sf);
time.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
}
setInterval(djs,1000);
</script>
</body>
</html>
4.真实时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height:332px;
width:388px;
background: url(img/z.png);
margin: 100px auto;
position: relative;
}
span{
height:332px;
width:388px;
display: block;
position: absolute;
top:0;
left:0;
}
span:nth-child(1){
background: url(img/h.png) no-repeat center;
}
span:nth-child(2){
background: url(img/m.png) no-repeat center;
}
span:nth-child(3){
background: url(img/s.png) no-repeat center;
}
</style>
</head>
<body>
<div id="box">
<span id="h"></span>
<span id="m"></span>
<span id="s"></span>
</div>
<script type="text/javascript">
function $id(id){
return document.getElementById(id);
}
var h=$id("h");
var m=$id("m");
var s=$id("s");
clock();
setInterval(clock,1000);
function clock(){
var date=new Date();
var ms=date.getMilliseconds();
var ss=date.getSeconds()+ms/1000;
var mm=date.getMinutes()+ss/60;
var hh=date.getHours()+mm/60;
s.style.transform="rotate("+(ss*6)+"deg)";
m.style.transform="rotate("+(mm*6)+"deg)";
h.style.transform="rotate("+(hh*30)+"deg)";
}
</script>
</body>
</html>
5.短信验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" />
<button>点击发送验证码</button>
<script type="text/javascript">
var btn=document.getElementsByTagName("button")[0];
btn.function(){
var that=this;//使用that变量来存储this
var timer=null;//声明暂时未赋值的变量,一般让它等于null
var count=5;//点击事件内部声明,可以不用重新赋值
clearInterval(timer);//使用定时器,上来先清除定时器
timer=setInterval(sendMsg,1000);//使用timer来指向定时器,方便清除操作
function sendMsg(){
count--;
if(count<0){
that.innerHTML="点击重新发送";//单标签内容一般用value,双标签一般用innerHTML
clearInterval(timer);
that.disabled=false;//恢复按钮点击
}else{
that.innerHTML="倒计时还有"+count+"秒";
that.disabled=true;//禁用按钮点击功能
}
}
}
</script>
</body>
</html>
6.5s后关闭广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ad{
width:100%;
height:800px;
background-color:skyblue;
}
</style>
</head>
<body>
<div id="ad"></div>
<script type="text/javascript">
var ad=document.getElementById("ad");
var count=5;
setInterval(close,1000);
function close(){
count--;
if(count==0){
ad.style.display="none";
}
}
</script>
</body>
</html>
7.5s页面自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="pp">5秒自动跳转至百度首页</p>
<script type="text/javascript">
var pp=document.getElementById("pp");
var count=5;
setTimeout(tioazhuan,1000);//没秒循环操作一次,达到倒计时效果
function tioazhuan(){
count--;
if(count<=0){
window.location.href="http://www.baidu.com";
}else{
setTimeout(tioazhuan,1000);//函数自调用——递归
pp.innerHTML=count+"秒自动跳转至百度首页";
}
}
</script>
</body>
</html>
8.长图滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:600px;
height: 500px;
border: 3px solid #333;
margin:100px auto;
overflow: hidden;
position: relative;
}
span{
width:600px;
height:250px;
position: absolute;
}
#imgs{
position: absolute;
}
#tops{
top:0;
}
#bottoms{
top:250px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/QQ图片20190402085835.jpg" id="imgs"/>
<span id="tops"></span>
<span id="bottoms"></span>
</div>
<script type="text/javascript">
var box=$id("box");
var tops=$id("tops");
var bottoms=$id("bottoms");
var imgs=$id("imgs");
var num=0;
var timer=null;
mouseover(tops,upMove);
mouseover(bottoms,downMove);
function $id(id){
return document.getElementById(id);
}
function mouseover(name,fun){
name.function(){
timer=setInterval(fun,1);
}
name.function(){
clearInterval(timer);
}
}
function downMove(){
if(num<=0){
clearInterval(timer);
}else{
num--;
imgs.style.top=-num+"px";
}
}
function upMove(){
if(num>=(1571-500)){
clearInterval(timer);
}else{
num++;
imgs.style.top=-num+"px";
}
}
</script>
</body>
</html>
9.自己写的一个小练习:点击按钮出现相应盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
button{
width:80px;
height:40px;
display:block;
float:left;
}
#father{
clear: both;
}
#father div{
width: 78px;
height:500px;
border:1px solid #666;
margin:10px 0;
text-align: center;
line-height: 100px;
visibility: hidden;
float:left;
}
</style>
</head>
<body>
<script type="text/javascript">
var body=document.getElementsByTagName("body")[0];
var colors=["red","blue","yellow","purple","LightPink","Crimson","DoderBlue","ForestGreen","DarkKhaki","BlanchedAlmond","DimGray"];
var num=colors.length;
for(var i=0;i<num;i++){
var cBtn=document.createElement("button");
cBtn.innerHTML=i+1;
body.appendChild(cBtn);
}
var fatherDiv=document.createElement("div");
fatherDiv.setAttribute("id","father");
body.appendChild(fatherDiv);
for(var i=0;i<num;i++){
var cDiv=document.createElement("div");
cDiv.innerHTML=i+1;
fatherDiv.appendChild(cDiv);
}
var btns=document.getElementsByTagName("button");
var fatherDiv=document.getElementById("father");
var dvs=fatherDiv.getElementsByTagName("div");
for(var i=0;i<btns.length;i++){
btns[i].index=i;
btns[i].function(){
for(var j=0;j<btns.length;j++){
btns[j].style.backgroundColor="";
dvs[j].style.visibility="hidden";
dvs[j].style.backgroundColor="";
}
this.style.backgroundColor=colors[this.index];
dvs[this.index].style.visibility="visible";
dvs[this.index].style.backgroundColor=colors[this.index];
}
}
</script>
</body>
</html>
10.获取字符串长度方法封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str="i am strong not 虚胖";
function getStringLength(str){
var sum=0;
var code=0;
for(var i=0;i<str.length;i++){
code=str.charCodeAt(i);
if(code>=0&&code<=127){
sum++;
}else{
sum+=2;
}
}
return sum;
}
var length=getStringLength(str);
console.log(length);
</script>
</body>
</html>
11.查找字符位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
请输入字符串:<input type="text" id="txt1"/><br />
请输入要查找的字符:<input type="text" id="txt2"/><br />
<button id="btn1">从前面查找</button>
<button id="btn2">从后面查找</button>
<script type="text/javascript">
function $id(id){return document.getElementById(id)}
$id("btn1").function(){
alert("从前面查找,下标是:"+($id("txt1").value).indexOf($id("txt2").value));
}
$id("btn2").function(){
alert("从后面查找,下标是:"+($id("txt1").value).lastIndexOf($id("txt2").value));
}
</script>
</body>
</html>
12.网址编码解码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str="https://hao.360.cn/?a1004";
var bstr=encodeURIComponent(str);
console.log(bstr);// https%3A%2F%2Fhao.360.cn%2F%3Fa1004
var jstr=decodeURIComponent(bstr);
console.log(jstr);// https://hao.360.cn/?a1004
</script>
</body>
</html>
13.三种保留两位小数的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num=12342342345.6788656;
two(num);
two1(num);
two2(num);
function two(num){
var str=num.toString();
var end=str.indexOf(".")+3;
var strNew=str.substr(0,end);
var numNew=Number(strNew);
console.log(numNew);
}
function two1(num){
var num1=parseInt(num*100);
var num2=num1/100;
console.log(num2);
}
function two2(num){
var str=num.toFixed(2);
var num1=Number(str);
console.log(num1);//具有四舍五入功能
}
</script>
</body>
</html>
14.案例:判断上传文件类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="files"/>
<p id="pp"></p>
<script type="text/javascript">
var pp=document.getElementById("pp");
var files=document.getElementById("files");
files.function(){
var filePath=this.value;
var houzhui=filePath.substr(filePath.lastIndexOf(".")).toLocaleLowerCase();
if(houzhui == ".jpg" || houzhui ==".png" || houzhui==".gif" ){
pp.innerHTML="图片格式正确";
}else{
pp.innerHTML="图片格式不正确";
}
}
</script>
</body>
</html>
15.获取元素方式的封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="dv"></div>
<div class="dv"></div>
<div></div>
<script type="text/javascript">
function $(str){
var firstLetter=str.charAt(0);
var secound=str.substr(1);
switch(firstLetter){
case "#":
return document.getElementById(secound);
case ".":
return document.getElementsByClassName(secound);
default:
return document.getElementsByTagName(str);
}
}
/*$("#dv").style.backgroundColor="red";
$(".dv")[0].style.backgroundColor="yellow";
$("div")[0].style.border="2px solid green";
$("div")[1].style.border="2px solid green";
$("div")[2].style.border="2px solid green";*/
document.querySelector("#dv").style.backgroundColor="red";
document.querySelector(".dv").style.backgroundColor="yellow";
document.querySelector("div").style.border="2px solid green";
document.querySelectorAll("div")[1].style.border="2px solid green";
document.querySelectorAll("div")[2].style.border="2px solid green";
</script>
</body>
</html>
16.无缝滚动图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:600px;
height:238px;
border:2px solid #333;
position: relative;
margin:100px auto;
overflow: hidden;
}
#box ul{
position: absolute;
left:0;
width:1800px;
}
#box li{
list-style: none;
float: left;
}
#box li img{
vertical-align: top;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
</ul>
</div>
<script type="text/javascript">
var uu=document.querySelector("ul");
var num=0;
var timer=null;
timer=setInterval(scrool,20);
function scrool(){
num++;
num<1200?uu.style.left=-num+"px":num=0;
}
uu.function(){
clearInterval(timer);
}
uu.function(){
timer=setInterval(scrool,20);
}
</script>
</body>
</html>
17.匀速运动的盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
button{
width:80px;
height:40px;
border-radius: 5px;
background-color:deepskyblue;
margin:5px;
}
#father{
width:500px;
height:500px;
margin:10px;
position: relative;
border:2px solid red;
}
#son{
width:100px;
height:100px;
background-color:yellow;
position: absolute;
top:0px;
left:0;
}
</style>
</head>
<body>
<button>开始</button>
<button>暂停</button>
<div id="father">
<div id="son"></div>
</div>
<script type="text/javascript">
var box=document.querySelector("#son");
var btn1=document.querySelectorAll("button")[0];
var btn2=document.querySelectorAll("button")[1];
var timer=null;
var num=0;
btn1.function(){
timer=setInterval(move,20);
}
btn2.function(){
clearInterval(timer);
}
function move(){
if(num>=400){
clearInterval(timer);
}else{
num++;
box.style.top=num+"px";
box.style.left=num+"px";
}
}
</script>
</body>
</html>
18.加速运动的盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color:yellow;
position: relative;
left:0;
}
</style>
</head>
<body>
<button>Move</button>
<div id="box"></div>
<script type="text/javascript">
var dv=document.querySelector("div");
var btn=document.querySelector("button");
var leader=0;
var target=1000;
btn.function(){
setInterval(move,30);
}
function move(){
leader=leader+(target-leader)/10;
dv.style.left=leader+"px";
}
</script>
</body>
</html>
19.重写轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:300px;
height:238px;
margin:auto;
border:2px solid #333;
position: relative;
overflow: hidden;
}
#box ul{
list-style: none;
width:1500px;
position: absolute;
left:0;
}
#box ul li{
float: left;
}
#box ul li img{
vertical-align: top;
}
#fatherBox{
width:500px;
height:300px;
margin:100px auto;
position: relative;
}
button{
width:80px;
height:40px;
background-color:lightskyblue;
color:yellow;
font-size:20px;
font-weight: 700;
position: absolute;
top:90px;
}
button:nth-child(1){
left: 20px;
}
button:nth-child(2){
right: 20px;
}
</style>
</head>
<body>
<div id="fatherBox">
<button>上一张</button>
<button>下一张</button>
<div id="box">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
var btns=document.querySelectorAll("button");
var uu=document.querySelector("ul");
var num=0;
btns[0].function(){
if(num==900){
num=0;
uu.style.left="0px";
}else{
num+=300;
uu.style.left=-num+"px";
}
}
btns[1].function(){
if(num==0){
num=900;
uu.style.left="-900px";
}else{
num-=300;
uu.style.left=-num+"px";
}
}
</script>
</body>
</html>
20.缓动盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<button>开始移动</button>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById("box");
var btn=document.querySelector("button");
var leader=0;
var target=500;
btn.function(){
setInterval(function(){
leader=leader+(target-leader)/20;
box.style.left=leader+"px";
},20);
}
</script>
</body>
</html>
21.焦点轮播图案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
vertical-align: top;
}
#box{
width:590px;
height:470px;
margin:100px auto;
border: 2px solid #333;
padding:10px;
position: relative;
}
#content{
width:100%;
height:100%;
overflow: hidden;
}
ul,ol{
list-style: none;
}
ul{
width:1000%;
position: relative;
}
ul li{
float:left;
}
ol{
position: absolute;
left:50%;
bottom:15px;
}
ol li{
width:40px;
height:40px;
background-color: white;
text-align: center;
line-height: 40px;
border-radius: 20px;
border:1px solid #333;
float: left;
margin-right:5px;
}
.bgc{
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
<ol>
<li class="bgc">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var uu=box.children[0].children[0];
var oo=box.children[1];
var lis=oo.children;
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].function(){
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
this.className="bgc";
target=-590*(this.index);
}
}
var leader=0;
var target=0;
setInterval(function(){
leader=leader+(target-leader)/20;
uu.style.left=leader+"px";
},20);
</script>
</body>
</html>
22.点击切换案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:590px;
height:470px;
margin:100px auto;
border: 2px solid #333;
padding:10px;
position: relative;
}
#content{
width:100%;
height:100%;
overflow: hidden;
}
ul{
width:1000%;
position: relative;
list-style: none;
}
ul li{
float:left;
}
ol{
position: absolute;
right:10%;
bottom:15px;
list-style: none;
}
ol li{
width:40px;
height:40px;
background-color: white;
text-align: center;
line-height: 40px;
border-radius: 20px;
border:1px solid #333;
float: left;
margin-right:5px;
}
.bgc{
background-color: yellow;
}
button{
position: absolute;
top:0;
background-color:#666;
opacity: .4;
color:#ccc;
height:80px;
width:40px;
font-size:30px;
top:50%;
margin-top:-40px;
display: none;
}
#left{
left:20px;
}
#right{
right: 20px;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<ul></ul><!--存放照片-->
</div>
<ol></ol><!--存放小圆点-->
<button id="left"><</button>
<button id="right">></button>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var uu=box.children[0].children[0];
var oo=box.children[1];
var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
for(var i=0;i<arr.length;i++){//创建ul中的li及图片列表
var cImg=document.createElement("img");
cImg.src=arr[i];
var cLi=document.createElement("li");
cLi.appendChild(cImg);
uu.appendChild(cLi);
}
var uulis=uu.children;
for(var i=0;i<uulis.length;i++){//创建ol中的小圆点列表
var cLi=document.createElement("li");
cLi.innerHTML=i+1;
oo.appendChild(cLi);
}
var lis=oo.children;
lis[0].className="bgc";
var left=document.getElementById("left");
var right=document.getElementById("right");
box.function(){//鼠标经过,显示按钮
left.style.display="block";
right.style.display="block";
}
box.function(){//鼠标离开隐藏按钮
left.style.display="none";
right.style.display="none";
}
left.function(){//左边鼠标点击右移动
target+=590;
var i=-target/590;
if(i<=0){
i=0;
}
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
lis[i].className="bgc";
}
right.function(){//右边鼠标点击左移动
target-=590;
var i=-target/590;
if(i>=3){
i=3;
}
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
lis[i].className="bgc";
}
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].function(){//鼠标经过小圆点,图片移动到对应的那张
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
this.className="bgc";
target=-590*(this.index);
}
}
var leader=0;
var target=0;
setInterval(function(){//定时器,实现动态移动效果
leader=leader+(target-leader)/20;
if(target>=0){
target=0;
}else if(target<=-(590*3)){
target=-(590*3);
}
uu.style.left=leader+"px";
},20);
</script>
</body>
</html>
23.使用鼠标跟随写的导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background-color: #CCCCCC;
}
#box{
width:500px;
height:50px;
border:1px #333 solid;
margin:50px auto;
background-color: white;
position: relative;
}
ul{
list-style: none;
position: absolute;
}
ul li{
float: left;
width:100px;
height: 50px;
text-align: center;
line-height: 50px;
}
span{
display: inline-block;
background: url(img/5.png) no-repeat;
width:100px;
height:50px;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<span></span>
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<script type="text/javascript">
var lis=document.getElementsByTagName("li");
var span=document.getElementsByTagName("span")[0];
var flag=0;
for(var i=0;i<lis.length;i++){
lis[i].function(){
target=this.offsetLeft;
}
lis[i].function(){
target=flag;
}
lis[i].function(){
flag=this.offsetLeft;
}
}
var leader=0;
var target=0;
setInterval(function(){
leader=leader+(target-leader)/10;
span.style.left=leader+"px";
},20);
</script>
</body>
</html>
24.移动的猴子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:100px;
height:100px;
position: relative;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/猴子.gif"/>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
document.function(event){
var event = event||document.event;
targetX=event.clientX-box.offsetWidth/2;
targetY=event.clientY-box.offsetWidth/2;
}
var leaderX=0,leaderY=0,targetX=0,targetY=0;
setInterval(function(){
leaderX=leaderX+(targetX-leaderX)/10;
leaderY=leaderY+(targetY-leaderY)/10;
box.style.left=leaderX+"px";
box.style.top=leaderY+"px";
},20);
</script>
</body>
</html>