1计时器2 setTimeout 在指定时间之后只会执行一次；
1.语法结构： setTimeout（参数1，参数2）； 参数1；需要执行的代码； 参数2：间隔的时间；
2.使用方法： （1）setTimeout（函数，间隔时间）
2清空计时器 clearTimeout
1.语法结构：clearTimeout （计时器的id）；
3简单动画 setinterval 来做
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="开始"/>
<input type="button" id="btn2" value="停止"/>
<div id="box"></div>
</body>
</html>
<script>
//获取元素
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var box=document.getElementById("box");
var left1=0;
var timer=null;
//先给按钮btn1添加一个单击事件
btn1.onclick=function(){
//在设置计时器之前要先清空计时器；
clearInterval(timer);
//现在要给这个box添加一个计时器
timer=setInterval(function(){
left1=left1+10;
//现在要判断是否到达目的地
if(left1>=800){
clearInterval(timer);
box.style.left= 800+"px";
}else{
box.style.left=left1+"px";
}
},100);
}
//现在要给按钮btn2设置一个单击事件
btn2.onclick=function(){
//清空那个计时器
clearInterval(timer);
}
</script>
4动画的补充；
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #F10215;
position:absolute;
left:0;
top: 50px;
}
#box2{
width: 100px;
height: 100px;
background-color: magenta;
position: absolute;
left:0;
top: 200px;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start"/>
<input type="button" value="暂停" id="suspend"/>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
<script>
//1.现在要获取元素
var start=document.getElementById("start");
var suspend=document.getElementById("suspend");
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
//现在也给这两个盒子的left都要设置为0
var left1=0;
var timer=null;
//现在给按钮start设置一个单击事件
start.onclick=function(){
//不过在设置计时器之前要先清除计时器
clearInterval(timer);
//现在给这个盒子的移动添加一个计时器
timer=setInterval(function(){
left1=left1+10;
//现在要判断这个距离是否已经走到目的地了
if(left1>=800){
clearInterval(timer);
box1.style.left=800+"px";
box2.style.left=800+"px";
}else{
box1.style.left=left1+"px";
box2.style.left=left1+"px";
}
},100)
}
//在这里给鼠标设置一个鼠标单击事件
suspend.onclick=function(){
clearInterval(timer);
}
</script>
5 index京东计时器内容；
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我们自己的京东大项目</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!--页面顶部banner开始-->
<div class="banner" id="banner">
<div class="w banner-bg">
<a href="https:www.baidu.com" ></a>
<i class="iconfont" id="closeTopAd"></i>
</div>
</div>
<!--页面顶部banner结束-->
<!--页面shortcut开始-->
<div class="shortcut">
<div class="w">
<div class="shortcut-left fl">
<i class="iconfont"></i>
<span>广州</span>
</div>
<div class="shortcut-right fr">
<ul>
<li><a href="#">你好，请登录</a> <a href="#" class="col-red">免费注册</a></li>
<li class="line"></li>
<li><a href="#">我的订单</a></li>
<li class="line"></li>
<li class="iconfontli">
<a href="#">我的京东</a>
<i class="iconfont"></i>
</li>
<li class="line"></li>
<li><a href="#">京东会员</a></li>
<li class="line"></li>
<li><a href="#">企业采购</a></li>
<li class="line"></li>
<li class="iconfontli">
<span>客户服务</span>
<i class="iconfont"></i>
</li>
<li class="line"></li>
<li class="iconfontli">
<span>网站导航</span>
<i class="iconfont"></i>
</li>
<li class="line"></li>
<li>手机京东</li>
</ul>
</div>
</div>
</div>
<!--页面shortcut结束-->
<!--页面header部分开始-->
<div class="header w">
<div class="logo">
<a href="#">京东</a>
</div>
<div class="search">
<input type="text" class="fl" placeholder="遮阳伞"/>
<button class="fr">
<i class="iconfont"></i>
</button>
</div>
<div class="buyCar">
<i class="iconfont"></i>
<a class="col-red">我的购物车</a>
<span>0</span>
</div>
<div class="hotwords">
<ul>
<li><a class="col-red" href="#">低至5折</a></li>
<li><a href="#">乐视414</a></li>
<li><a href="#"> 园林农机</a></li>
<li><a href="#">adidas89元</a></li>
<li><a href="#">家电秒杀</a></li>
<li><a href="#">睡衣男冬</a></li>
<li><a href="#">儿童保温杯</a></li>
<li><a href="#"> 满199减100</a></li>
</ul>
</div>
<div class="naviItems">
<ul class="fl">
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">拍卖</a></li>
</ul>
<span class="navi-line fl"></span>
<ul class="fl">
<li class="noMarginL30"><a href="#">服装城</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
</ul>
<span class="navi-line fl"></span>
<ul class="fl">
<li class="noMarginL30"><a href="#">京东金融</a></li>
</ul>
</div>
</div>
<!--页面header部分结束-->
<!--页面main部分开始-->
<div class="main w clearfix">
<div class="main-left fl">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">家用电器</a></li>
</ul>
</div>
<div class="main-center fl">
<div class="main-center-top">
<a href="#"><img src="images/lbt1.jpg" alt=""/></a>
<div class="points">
<i class="noMarginL10"></i>
<i></i>
<i class="current"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class="arrow">
<span class="arrow-left"><i class="iconfont"></i></span>
<span class="arrow-right"><i class="iconfont"></i></span>
</div>
</div>
<div class="main-center-bottom">
<a href="#" class="space1"><img src="images/space1.jpg" alt=""/></a>
<a href="#" class="space2"><img src="images/space2.jpg" alt=""/></a>
</div>
</div>
<div class="main-right fr">
<div class="main-right-user">
<div class="user-info">
<a href="#" class="fl user-info-imga"><img src="images/no_login.jpg" alt=""/></a>
<div class="fl">
<p class="welcomep">Hi，欢迎来到京东</p>
<p><a href="#">登录</a> <a href="#">注册</a></p>
</div>
</div>
<div class="user-profit">
<a href="#" class="user-profit-one">新人福利</a>
<a href="#" class="user-profit-two">PLUS会员</a>
</div>
</div>
<div class="main-right-news">
<div class="news-header">
<a href="" class="fl">促销</a>
<span class="fl newsLine"></span>
<a href="" class="fl">公告</a>
<a href="" class="fr">更多</a>
<span class="newsRedLine"></span>
</div>
<div class="news-content">
<ul>
<li><a href="#">英国超市ASDA入驻京东</a></li>
<li><a href="#">京东与欧莱雅中国合作升级</a></li>
<li><a href="#">京东生鲜即刻赔 告别退货难</a></li>
<li><a href="#">京东成为中国最大家电零售商</a></li>
</ul>
</div>
</div>
<div class="main-right-live">
<ul>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
<s class="jian-flag">
<em>减</em>
<b></b>
</s>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--页面main部分结束-->
<!--页面秒杀seckill部分开始-->
<div class="seckill w">
<div class="seckill-header">
<i></i>
<b></b>
<h3>京东秒杀</h3>
<a href="">总有你想不到的低价
<s></s>
</a>
<div class="time">
<span class="span-txt">当前场次</span>
<span class="span-time" id="spanHour">06</span>
<span class="span-point">:</span>
<span class="span-time" id="spanMin">59</span>
<span class="span-point">:</span>
<span class="span-time" id="spanSec">00</span>
<span class="span-txt">后结束抢购</span>
</div>
</div>
<div class="seckill-content">
<div class="sk-c-left fl">
<ul>
<li>
<a class="sk-c-left-links" href="#">
<img src="images/bike.jpg" alt=""/>
<i></i>
<span>永久30速自行车 26寸男女式越野山地车 油碟/线刹可选 铝合金</span>
</a>
<p class="sk-c-left-price">
<i class="col-red">¥</i>
<b class="col-red">899.00</b>
<s>¥</s>
<del>1999.00</del>
</p>
</li>
<li>
<a class="sk-c-left-links" href="#">
<img src="images/bike1.jpg" alt=""/>
<i></i>
<span>永久30速自行车 26寸男女式越野山地车 油碟/线刹可选 铝合金</span>
</a>
<p class="sk-c-left-price">
<i class="col-red">¥</i>
<b class="col-red">899.00</b>
<s>¥</s>
<del>1999.00</del>
</p>
</li>
<li>
<a class="sk-c-left-links" href="#">
<img src="images/bike2.jpg" alt=""/>
<i></i>
<span>永久30速自行车 26寸男女式越野山地车 油碟/线刹可选 铝合金</span>
</a>
<p class="sk-c-left-price">
<i class="col-red">¥</i>
<b class="col-red">899.00</b>
<s>¥</s>
<del>1999.00</del>
</p>
</li>
<li>
<a class="sk-c-left-links" href="#">
<img src="images/bike3.jpg" alt=""/>
<i></i>
<span>永久30速自行车 26寸男女式越野山地车 油碟/线刹可选 铝合金</span>
</a>
<p class="sk-c-left-price">
<i class="col-red">¥</i>
<b class="col-red">899.00</b>
<s>¥</s>
<del>1999.00</del>
</p>
</li>
<li>
<a class="sk-c-left-links" href="#">
<img src="images/bike4.jpg" alt=""/>
<i></i>
<span>永久30速自行车 26寸男女式越野山地车 油碟/线刹可选 铝合金</span>
</a>
<p class="sk-c-left-price">
<i class="col-red">¥</i>
<b class="col-red">899.00</b>
<s>¥</s>
<del>1999.00</del>
</p>
</li>
</ul>
</div>
<div class="sk-c-right fl">
<a href="#"><img src="images/pingpai.jpg" alt=""/></a>
</div>
</div>
</div>
<!--页面秒杀seckill部分结束-->
<!--页面底部开始-->
<div class="footer">
<div class="footer-service">
<ul class="w">
<li>
<div>
<h5>多</h5>
<span>品类齐全，轻松购物</span>
</div>
</li>
<li>
<div>
<h5 class="kuai">快</h5>
<span>多仓直发，极速配送</span>
</div>
</li>
<li>
<div>
<h5 class="hao">好</h5>
<span>正品行货，精致服务</span>
</div>
</li>
<li class="noMarginR90">
<div>
<h5 class="sheng">省</h5>
<span>天天低价，畅选无忧</span>
</div>
</li>
</ul>
</div>
<div class="footer-help">
<div class="w">
<div class="footer-help-list">
<h5>购物指南</h5>
<ul>
<li><a href="#">购物流程</a></li>
<li><a href="#">会员介绍</a></li>
<li><a href="#">生活旅行</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">大家电</a></li>
<li><a href="#">联系客服</a></li>
</ul>
</div>
<div class="footer-help-list">
<h5>配送方式</h5>
<ul>
<li><a href="#">上门自提</a></li>
<li><a href="#">211限时达</a></li>
<li><a href="#">配送服务查询</a></li>
<li><a href="#">配送费收取标准</a></li>
<li><a href="#">海外配送</a></li>
</ul>
</div>
<div class="footer-help-list">
<h5>支付方式</h5>
<ul>
<li><a href="#">货到付款</a></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">分期付款</a></li>
<li><a href="#">邮局汇款</a></li>
<li><a href="#">公司转账</a></li>
</ul>
</div>
<div class="footer-help-list">
<h5>售后服务</h5>
<ul>
<li><a href="#">售后政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修/退换货</a></li>
<li><a href="#">取消订单</a></li>
</ul>
</div>
<div class="footer-help-list">
<h5>特色服务</h5>
<ul>
<li><a href="#">夺宝岛</a></li>
<li><a href="#">DIY装机</a></li>
<li><a href="#">延保服务</a></li>
<li><a href="#">京东E卡</a></li>
<li><a href="#">京东通信</a></li>
<li><a href="#">京东JD+</a></li>
</ul>
</div>
<div class="footer-help-cover">
<h5>京东自营覆盖区县</h5>
<p class="footer-help-cover-info">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<p class="footer-help-cover-more"><a href="#">查看详情<i class="iconfont"></i></a></p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="footer-Copyright-links">
<a href="#">关于我们</a>
<span class="copyright-split
"></span>
<a href="#">联系我们</a>
<span class="copyright-split
"></span>
<a href="#">联系客服</a>
<span class="copyright-split
"></span>
<a href="#">合作招商</a>
<span class="copyright-split
"></span>
<a href="#">商家帮助</a>
<span class="copyright-split
"></span>
<a href="#">营销中心</a>
<span class="copyright-split
"></span>
<a href="#">手机京东</a>
<span class="copyright-split
"></span>
<a href="#">友情链接</a>
<span class="copyright-split
"></span>
<a href="#">销售联盟</a>
<span class="copyright-split
"></span>
<a href="#">京东社区</a>
<span class="copyright-split
"></span>
<a href="#">风险监测</a>
<span class="copyright-split
"></span>
<a href="#">隐私政策</a>
<span class="copyright-split
"></span>
<a href="#">京东公益</a>
<span class="copyright-split
"></span>
<a href="#">English Site</a>
<span class="copyright-split
"></span>
<a href="#">Contact Us</a>
</div>
<div class="footer-Copyright-info">
<p><a href="#">京公网安备 11000002000088号</a><span class="copyright-split"></span>京ICP证070359号<span class="copyright-split"></span><a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a><span class="copyright-split"></span>新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号<span class="copyright-split"></span><a href="#">出版物经营许可证</a><span class="copyright-split"></span><a href="#">网络文化经营许可证京网文[2014]2148-348号</a><span class="copyright-split"></span>违法和不良信息举报电话：4006561155</p>
<p>Copyright © 2004 - 2017 京东JD.com 版权所有<span class="copyright-split"></span>消费者维权热线：4006067733 <a href="#">经营证照</a></p>
<p> 京东旗下网站：<a href="#">京东钱包</a><span class="copyright-split"></span><a href="#">京东云</a></p>
</div>
<div class="footer-Copyright-auth">
<a href="#" class="auth1"></a>
<a href="#" class="auth2"></a>
<a href="#" class="auth3"></a>
<a href="#" class="auth4"></a>
<a href="#" class="auth5"></a>
<a href="#" class="auth6"></a>
</div>
</div>
</div>
<!--页面底部结束-->
<script src="js/common.js"></script>
<script>
//1.先获取元素；
var spanHour=document.getElementById("spanHour");
var spanMin=document.getElementById("spanMin");
var spanSec=document.getElementById("spanSec");
//现在要设置计时器
setInterval(function(){
//2.1 获取span里面的内容(文本)
txtHour=+getText(spanHour);
txtMin=+getText(spanMin);
txtSec=+getText(spanSec);
//2.2 改变他们(时分秒)的值
txtSec--;
//如果你的秒已经是小于0了，就应该马上变成59。分也要减1
//现在要开始判断了
if(txtSec<0){
txtSec=59;
txtMin--;
}
if(txtMin<0){
txtMin=59;
txtHour--;
}
//现在还要判断，看看那个得出的数字的位数是位数，如果小于十位数，那就要在前面加一个0;
if(txtSec<10){
txtSec="0"+txtSec;
}
if(txtMin<10){
txtMin="0"+txtMin;
}
if(txtHour<10){
txtHour="0"+txtHour;
}
//现在要获取时分秒span里面的文本了
setText(spanHour,txtHour);
setText(spanMin,txtMin);
setText(spanSec,txtSec);
},1000)
</script>
</body>
</html>
6条件断点（调试的一种方法）Editbreakproint;
7字符串的常用方法
1.字符串里面是有方法和属性的，因为可以把字符串看成是一个对象；
var str="abcdefjheri";
console.log(str);
2.字符串在内存中可以看成是数组的存在
var str= new String("abcjkhf");
console.log(str[2]);//这个地方输出的是数组下标为2的元素，是c;
3.字符串的方法
(1)charAt();可返回(得到)指定位置的字符;
语法结构:charAt(元素在字符串中的下标),
实例:var str="abcdefjheri";
console.log(str.charAt(4));//返回的结果是字符串
(2)charCodeAt();可返回指定位置的字符的 Unicode 编码
语法结构：charCodeAt(元素在字符串中的下标),返回的结果是ASS码当中的位置；
实例:
var str="abcdefjheri";
console.log(str.charCodeAt(2));//返回的结果是99；因为下标为2的c在ASSII码中的就是99；
(3)concat()用于连接两个或多个数组;
语法结构:concat(可以是一个或者多个);
实例:
var str=[1,2,3];
console.log(str.concat(4, 5));//这个返回的是一个新的数组[1,2,3,4,5,6];
(4)indexOf();返回某个指定的字符串值在字符串中首次出现的位置(这个默认的是从前面往后面检索的，就是从左到右；
语法结构:indexOf(需要检索的字符串值,规定在字符串中检索位置的下标);
var str="abcdrgcht";
console.log(str.indexOf("bc", 2));//返回是-1,就表示从2开始,没有找到bc;
(5)lastIndexOf();返回某个指定的字符串值在字符串中首次出现的位置,这个默认的是从后面往后面检索的，就是从右到左；
实例:语法结构:indexOf(需要检索的字符串值,规定在字符串中检索位置的下标);
var str="abcdrgcbht";
console.log(str.lastIndexOf("bc", 2));//返回是1,如果没有给参数的话，系统是自己默从最后一个元素往前面找的；
(6)replace();用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串;
语法结构:replace(被换的旧元素,替换的新的元素);
var str="哈哈，老铁，哈哈";
console.log(str.replace("哈哈", "嘿嘿"));//这种写法只能替换字符串数组中的第一个；
console.log(str.replace(/哈哈/g, "嘿嘿"));//这中用正则表达式的方法可以替换字符串数组中的所有相同元素；
(7)slice();可提取字符串的某个部分，并以新的字符串返回被提取的部分;
语法结构:slice(开始选取的下标,结束选取的下标);
var str="adcfgyhjert";
console.log(str.slice(2, 6));//返回的结果是cfgy;表示提取了从下标为2到下标为6的数组里面的元素，然后会返回出一个新的数组；
(8)split();把一个字符串分割成字符串数组;
语法结构:split("");
var str="123456789";
console.log(str.split(""));//输出的值是一个由这个原始字符串分成的单独字符串形成的数组；
(9)substr();可在字符串中抽取从start下标开始的指定数目的字符;
语法结构:substr(开始抽取元素的下标,抽取元素的长度)；
var str="abcdfghjyu";
console.log(str.substr(2, 4));//这里输出的结果是cdfg，表示总下标为2的元素开始抽取，按循序抽取四个，然后把这些抽取出来的元素形成一个新的字符串输出来；
(10)substring();提取字符串中介于两个指定下标之间的字符;
语法结构subString(开始提取元素的下标,结束提取元素的下标);
var str="qwerty";
console.log(str.substring(2, 5));//输出的结果是ert,表示的是把下标为2到下标为5的元素提取出来，然后以新的字符串输出来；
(11)toUpperCase();用于把字符串转换为大写;
语法结构:toUpperCase();
var str="aADFRETGYasdf";
console.log(str.toUpperCase());//返回的结果就是全部都是大写了；
(12)toLowerCase();用于把字符串转换为小写；
语法结构:toUpperCase();
var str="aADFRETGYasdf";
console.log(str.toLowerCase());//返回的结果就是全部都是小写了；
(13)toString();可把数组转换为字符串，并返回结果。
语法结构:需要变成字符串的数组.tpString();
var str=[1,2,3,4,5,6];
console.log(str.toString());//输出的结果是字符串
console.log(str);//输出的结果是数组；
(14)valueOf();//返回 Array 对象的原始值;
语法结构:需要返回的数组对象.valueOf();
var str = new String("abcdefg");
console.log(str);
console.log(str.valueOf());//返回的是abcdefg,一般这个这个方法都是在JS后台操作的，一般不会显现在js的代码中；
下午1window对象；
1.定义：一个window对象就是一个浏览器打开的一个窗口；
2.是script的顶级对象； （1）全局变量可以看成是window对象的属性； （2）声明的全局函数，可以看成是window对象方法；
3.window里面有一个name属性。他只能保存String类型的值；
4.window里面有两个重要的方法 （1）open（）打开一个新的浏览器窗口；
参数1：url 参数2：以什么方式打开，—blank，—self； 参数3：scepes; 参数4；
(2)close 那个窗口要关闭，就让那个窗口调用这个方法；
下午2 window对象的几个事件；
1window.onload 表示的是页面加载完毕后，才会去执行这个事件的代码；
2.window.onunload 页面关闭事件；
3.window.onbeforeunload;页面关闭之前的事件；
下午3.location对象（浏览器的地址信息）
url=协议名称+ip（域名）+端口号+目标资源的路径； （1）属性 （2）方法 A。加载新的文档：assign(） B。重新加载；reload; c.用新的文档替代旧的文档:replace;
下午4 history 浏览器访问过的url；
下午5 navigator对象 导航
可以拿到当前打开窗口这个浏览器的信息；
