一、对话框
alert("弹出内容")，返回undefined
prompt("提示用户输入")，确认返回"用户输入内容"，取消返回null
confirm("提示用户操作")，确认返回true，取消返回false
二、超时、间歇调用——js控制html代码
js是单线程语言——只有上一行执行完，才能下一行
java是多线程语言
------模拟多线程语言环境---------
超时调用：setTimeout(handler,time/ms); //返回id值
取消 超时调用：clearTimeout(id);
间歇调用：setInterval(handler,time);
取消 间歇调用：clearInterval(id);
综合例子：
div.style.marginLeft=div.offsetLeft+10+"px";
(更灵活，左偏移量——上一次和页面左边的距离，返回number值)
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
button{
margin:10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取div标签
var div=document.getElementsByTagName('div')[0];
//获取几个按钮
var btns=document.getElementsByTagName("button");
//第一个按钮——超时2s内后div右移
btns[0].onclick=function(){
var id=setTimeout(function(){ //setTimeout返回id值
div.style.marginLeft='100px';
},2000);
//取消超时需要id值，避免冲突就写在内部
btns[1].onclick=function(){
clearTimeout(id);
}
}
btns[2].onclick=function(){
//每隔一秒钟执行一遍，向右移动10px
var id=setInterval(function(){
div.style.marginLeft=div.offsetLeft+10+"px";
},1000);
btns[3].onclick=function(){
clearInterval(id);
}
}
btns[4].onclick=function(){ //等5s后->每间隔1s移动
function handler(){
div.style.marginLeft=div.offsetLeft+10+"px";
setTimeout(handler,1000); //间歇调用
}
setTimeout(handler,5000); //超时调用
}
}
</script>
<body>
<!--红方块-->
<div></div>
<!--按钮组-->
<button>超时调用</button>
<button>取消超时</button>
<button>间歇调用</button>
<button>取消间歇</button>
<button>超时模拟间歇</button>
</body>
三、样式属性
outerWidth：宽度是一定的
outerHeight：包含控制台高度
innerWidth：内部宽度(可视区域)
innerHeight
//相当于给div添加了行内样式
style.color：特殊的CSS样式
.backgroundColor：有-的属性，将-去掉->驼峰式命名
//当前元素的左偏移量，和浏览器左侧的距离
offsetLeft
offsetTop
offsetWidth：内容+border：边框以内的宽度
offsetHeight
//测元素内容宽度和高度
clientWidth
clientHeight
//scroll：滚动条
scrollWidth：有了滚动元素之后的可滚动的最大高度
scrollHeight
例子：
<style>
div{
width: 100px;
height: 100px;
background: red;
border:1px solid blue;
margin-left: 20px;
margin-top: 20px;
}
p{
height: 200px;
margin:0px;
border:1px solid blue;
}
</style>
<script type="text/javascript">
/*console.log(outerWidth);
console.log(outerHeight);*/
window.onload=function(){
var div=document.getElementsByTagName('div')[0];
/*console.log(div.clientWidth);
console.log(div.clientHeight);*/
/*console.log(div.scrollWidth);
-------<p>的高度是200px，上下2px的边框，还有<p>标签的外边距
console.log(div.scrollHeight);*/
console.log(div.offsetWidth);
console.log(div.offsetHeight);
}
</script>
<body>
<div>
<p></p>
</div>
</body>
结果：
四、简单页面例子——选项卡
JS代码：获取所有按钮
获取所有选项卡
给当前按钮，绑定对应选项卡
点击当前按钮后怎么样：所有按钮取消样式
给当前按钮设定样式
隐藏所有的列表项
显示当前按钮对应的列表项
<style>
div{
width: 400px;
margin:20px auto;
}
div.content{
height: 400px;
border:1px solid black;
}
div.content li{ /*给所有li(列表项)设置样式*/
list-style: none; /*删除list的小点*/
width: 400px;
height: 400px;
display: none; /*默认隐藏所有li*/
}
/*默认显示第一个按钮样式*/
button.current{
background-color: blue;
color: white；
}
/*默认显示第一个列表样式*/
div.content li.currentLi{
display: block;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取所有按钮
var btns=document.getElementsByTagName('button');
//获取所有选项卡
var lis=document.getElementsByTagName("li");
//用数组，有封装好的forEach()——相当于对底层for循环进行了封装，数组调用
Array.prototype.slice.call()：改变数组的slice方法的作用域——在特定作用域调用slice方法
call(this,参数列表)方法的第二个参数：传递给slice的参数(截取数组的起始位置)
//slice切割的作用域是btns，循环给每个按钮绑定对应的选项卡
forEach循环：回调函数，无this值
回调函数：哪个按钮点击后，(按钮)是样式的问题
取消所有btn样式，样式和后三个没设置样式的按钮一样
给当前按钮添加样式
(对应列表项)是隐藏和显示的问题
隐藏所有的列表项
显示当前列表项
Array.prototype.slice.call(btns).forEach(function(item,index,arr){ //item是每一个按钮
//点击当前按钮后怎么样
item.onclick=function(event){
//给所有btn取消样式，样式为后三个没有设置样式的按钮的样式
for(var i=0;i<btns.length;i++){
btns[i].className=' ';
}
//给当前点击按钮添加和第一个按钮一样的样式
event.target.className='current';
//隐藏所有li
for(var k=0;k<lis.length;k++){
lis[k].style.display='none';
}
//给按钮通过下标值匹配li
//当前li的下标和当前按钮对应的下标一样
lis[index].style.display='block'; //index是当前item的下标值
}
});
}
</script>
</head>
<body>
<div class="btns">
<button class="current">商品首页</button>
<button>商品详情页</button>
<button>购物车</button>
<button>商品设置</button>
</div>
<div class="content">
<ul>
<li class="currentLi">商品首页页面-----</li>
<li>商品详情页面-----</li>
<li>购物车页面------</li>
<li>商品设置页面------</li>
</ul>
</div>
</body>
五、简单页面例子——倒计时
JS代码：clock代码
现在的时间
结束的时间
相减是time
time->天、时、分、秒
获取span(天、时、分、秒)和p(时间到了之后要显示的)
如果时间<=0，p输出“倒计时已结束”，取消间歇调用，把span里天、时、分、秒都归0
否则span的元素内容就是获取到的天、时、分、秒
var id=setInterval(clock,1000); //第二个参数是ms，1s=1000ms
<style>
div.outer{
width: 50%;
margin:0 auto;
}
span{ /*给天、时、分、秒设置样式*/
color: red;
font-weight: bold; /*字体加粗*/
font-size: 30px;
}
p{
font-size: 40px;
color: blue;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload=function(){
//每隔一秒动一次
function clock(){
var today=new Date();
var endDay=new Date('2021-5-1');
//距离2021-5-1的秒数
var time=Math.round((endDay.getTime()-today.getTime())/1000);
//倒计时的秒数-->天、时、分、秒
var day=parseInt(time/(24*60*60));
var hour=parseInt((time-day*24*60*60)/3600);
var min=parseInt((time-day*24*60*60-hour*3600)/60);
var sec=parseInt(time-day*24*60*60-hour*3600-min*60);
//获取span和p
var spans=document.getElementsByTagName("span");
var p=document.getElementsByTagName('p')[0];
//如果倒计时的秒数<=0，显示结束，取消间歇调用，天、时、分、秒设成0
if(time<=0){
p.innerHTML='倒计时结束！'
clearInterval(id); //取消间歇调用
for(var i=0;i<spans.length;i++){
spans[i].innerHTML='0';
}
}
else{
//第一个span是天...
spans[0].innerHTML=day;
spans[1].innerHTML=hour;
spans[2].innerHTML=min;
spans[3].innerHTML=sec>=10?sec:"0"+sec;
}
}
var id=setInterval(clock,1000); //1s=1000ms //间歇调用
}
</script>
</head>
<body>
<div class="outer"> <!--方便把内容移到中间-->
<h1>距离五一放假还有：</h1>
<span>0</span>天
<span>0</span>时
<span>0</span>分
<span>0</span>秒
<p></p> <!--内容后期判断条件后再加-->
</div>
</body>
扫一扫
2180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
