27-选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
ul li{
float: left;
160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #999999;
}
#tab{
480px;
margin: 20px auto;
border: 1px solid red;
}
li.active{
background-color: #FFFFFF;
}
ul li a{
text-decoration: none;
color: #333333;
}
p.active{
display: block;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p class>新闻内容</p>
<p class>图片内容</p>
</div>
</body>
<script type="text/javascript">
var tabi = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p');
for (var i = 0;i < tabi.length; i++){
//保存变量 i
tabi[i].index = i;
tabi[i].onclick = function () {
for (var j = 0;j < tabi.length;j++){
tabi[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
tabContent[this.index].className = 'active';
}
}
</script>
</html>
28-仿淘宝搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝搜索框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#search{
position: relative;
}
label{
position: absolute;
font-size: 20px;
top: 8px;
left: 80px;
color: #999999;
}
input{
outline: none;
display: block;
400px;
height: 40px;
font-size: 20px;
border: 2px solid yellowgreen;
margin-left: 20px;
margin-top: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="search">
<input type="text" id="text" />
<label for="text" id="msg">pandaboy</label>
</div>
</body>
<script type="text/javascript">
var text = document.getElementById('text');
var msg = document.getElementById('msg');
// 检测用户输入的表单控件
text.oninput = function () {
if (this.value == ''){
msg.style.display = 'block';
}else {
msg.style.display = 'none';
}
}
</script>
</html>
29-获取当前最新的时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取当前时间</title>
<style type="text/css">
/**{*/
/*padding: 0;*/
/*margin: 0;*/
/*}*/
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
// document.body.innerHTML = '123';
setInterval(function () {
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth();
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
// 现在是xxxxn年xx月xx日 xx:xx:xx
document.body.innerHTML = "现在是"+y+'年'+(m+1)+'月'+d+'日' +" "+num(h)+':'+num(min)+':'+num(s);
},1000);
function num(n) {
if (n<10){
return '0'+n;
}
return n;
}
</script>
</html>
30-匀速运动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动事件</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 0;
}
</style>
</head>
<body>
<div id="wrap">
<button id="btn">运动</button>
<div class="box" id="box1"></div>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box1 = document.getElementById('box1');
var count = 0;
var time = null;
btn.onclick = function () {
// box1.style.left = '20px';
setInterval(function () {
count += 0.2;
if (count > 1000){
clearInterval(time);
box1.style.display = 'none';
}
box1.style.left = count+'1px';
},10)
}
</script>
</html>
31-5秒之后关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5秒后关闭</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
img{
position: fixed;
cursor: move;
}
#left{
left: 0;
}
#right{
right: 0;
}
ul{
list-style-type: none;
}
ul li{
font-size: 25px;
}
</style>
</head>
<body>
<img src="bd_logo1.png" id="left"/>
<img src="bd_logo1.png" id="right"/>
<ul>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</body>
<script type="text/javascript">
window.onload = function () {
var left = document.getElementById('left');
var right = document.getElementById('right');
setTimeout(function () {
left.style.display = 'none';
right.style.display = 'none';
},3000)
}
</script>
</html>
32-小米滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.warp{
position: relative;
512px;
height: 400px;
border: 3px solid coral;
overflow: hidden;
margin: 100px auto;
}
img{
position: absolute;
top: 0;
left: 0;
}
.up{
position: absolute;
512px;
height: 200px;
}
.down{
position: absolute;
512px;
height: 200px;
top:200px;
}
</style>
</head>
<body>
<div id="box" class="warp">
<img src="mi.png" id="xiaomi"/>
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div>
</body>
<script type="text/javascript">
var up = document.getElementById('picUp');
var down = document.getElementById('picDown');
var img = document.getElementById('xiaomi');
var count = 0;
var time = null;
up.onmouseover = function () {
//不管怎样，先清除定时器
clearInterval(time);
time = setInterval(function () {
count -= 3;
count >= -2100 ? img.style.top = count + 'px':clearInterval(time) ;
},30)
};
down.onmouseover = function () {
clearInterval(time);
time = setInterval(function () {
count += 3;
count <= 0 ? img.style.top = count + 'px':clearInterval(time) ;
},30)
}
</script>
</html>
33-无缝轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
300px;
height: 150px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
ul{
list-style-type: none;
}
ul li{
float: left;
}
.box ul{
400%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../img/safe-1.jpg" /></li>
<li><img src="../img/safe-2.jpg" /></li>
<li><img src="../img/safe-3.jpg" /></li>
<li><img src="../img/safe-4.jpg" /></li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
var ul = box.children[0];
var num = 0;
var time = null;
time = setInterval(autoPlay,30);
function autoPlay() {
num--;
num <= -600 ? num = 0:num;
ul.style.left = num + 'px';
}
box.onmouseover = function () {
clearInterval(time)
};
box.onmouseout = function () {
time = setInterval(autoPlay,30);
}
</script>
</html>
34-BOM_输出
// 1.JS的核心就是ECMA DOM BOM
// 2.BOM就是 Browser Object Model 浏览器
// 输出 屏幕的宽高等 滚动的宽高 setInterval... window.open() close() location
// 1.alert()
// 浏览器的调试
// 2.console.log()
// 获取用户的输入框内容
// 3.prompt()
// 4. confirm 多一个取消键
// 如果点击确定，返回true 如果点击取消，返回的是false
35-open_close
<!--行间的js中的open，window不能省略-->
<button onclick="window.open('https://www.baidu.com/')">按钮</button>
<button>百度</button>
<button onclick="window.close()">关闭网页</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var cBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function () {
// open('https://www.baidu.com');
// 打开空白页面
open('about:blank','_self');
};
cBtn.onclick = function () {
if(confirm('是否关闭')){
close();
}
};
36-BOM的其他对象
// 返回浏览器的用户设备信息
console.log(window.navigator.userAgent);
console.log(window.location);
// 经常使用的方法
// window.location.href = 'https://www.baidu.com';
// 全局刷新，尽量少用
window.location.reload();
37-client系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Client</title>
<style type="text/css">
.box{
200px;
height: 200px;
position: absolute;
border: 1px yellowgreen solid;
margin: 10px 0 0 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop); //边框顶部的宽度
console.log(oBox.clientLeft); //边框左部的距离
console.log(oBox.clientHeight); //内容区域+ 上下padding值
console.log(oBox.clientWidth); //内容区域 + 左右padding值
</script>
</html>
38-屏幕的可视区域
window.onload = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
};
window.onresize = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
39-offset系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset</title>
</head>
<body>
<div id="box" style=" 200px;height: 200px ;border:1px solid red;padding: 10px">
</div>
</body>
<script type="text/javascript">
window.onload = function () {
// 占位宽高
// offsetTop: 如果盒子没有设置定位，就是到浏览器的顶部的距离
var box = document.getElementById('box');
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
}
</script>
</html>
40-scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style=" 2000px;height: 2000px">
<!--滚动系列-->
<div style="height: 200px;background: green"></div>
<div style="height: 200px;background: red"></div>
<div style="height: 200px;background: beige"></div>
<div style="height: 200px;background: gray"></div>
<div style="height: 200px;background: tan"></div>
<div style="height: 200px;background: aqua"></div>
<div style=" 200px;height: 200px;border: 1px solid red; overflow: auto" id="scroll">
<p>12312312312312312312</p>
<p>12312312312312312312</p><p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
//实时监听滚动事件
window.onscroll = function () {
// console.log(1);
// console.log('上'+document.documentElement.scrollTop);
// console.log('左'+document.documentElement.scrollLeft);
// console.log('宽'+document.documentElement.scrollWidth);
// console.log('高'+document.documentElement.scrollHeight);
};
var s = document.getElementById('scroll');
s.onscroll = function () {
console.log('上'+s.scrollTop);
console.log('左'+s.scrollLeft);
console.log('宽'+s.offsetWidth);
console.log('高'+s.scrollHeight); //内容的高度(包含padding但是不包含margin)
};
}
</script>
</html>