路飞学城Python-Day52

27-选项卡

<!DOCTYPE html>

<head>

padding: 0;

margin: 0;

}

ul{

list-style-type: none;

}

ul li{

float: left;

width: 160px;

height: 60px;

line-height: 60px;

text-align: center;

background-color: #999999;

}

#tab{

width: 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;

}

display: none;

height: 200px;

text-align: center;

line-height: 200px;

background: #FFFFFF;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

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>

<head>

<title>淘宝搜索框</title>

padding: 0;

margin: 0;

}

#search{

position: relative;

}

label{

position: absolute;

font-size: 20px;

top: 8px;

left: 80px;

color: #999999;

}

input{

outline: none;

display: block;

width: 400px;

height: 40px;

font-size: 20px;

border: 2px solid yellowgreen;

margin-left: 20px;

margin-top: 20px;

border-radius: 5px;

}

</style>

</head>

<body>

<label for="text" id="msg">pandaboy</label>

</div>

</body>

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>

<head>

<title>获取当前时间</title>

/**{*/

/*padding: 0;*/

/*margin: 0;*/

/*}*/

</style>

</head>

<body>

</body>

// 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>

<head>

<title>匀速运动事件</title>

padding: 0;

margin: 0;

}

.box{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

top: 50px;

left: 0;

}

</style>

</head>

<body>

</div>

</body>

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>

<head>

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>

<ul>

</ul>

</body>

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>

<head>

padding: 0;

margin: 0;

}

.warp{

position: relative;

width: 512px;

height: 400px;

border: 3px solid coral;

overflow: hidden;

margin: 100px auto;

}

img{

position: absolute;

top: 0;

left: 0;

}

.up{

position: absolute;

width: 512px;

height: 200px;

}

.down{

position: absolute;

width: 512px;

height: 200px;

top:200px;

}

</style>

</head>

<body>

</div>

</body>

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>

<head>

padding: 0;

margin: 0;

}

.box{

width: 300px;

height: 150px;

margin: 50px auto;

overflow: hidden;

position: relative;

}

ul{

list-style-type: none;

}

ul li{

float: left;

}

.box ul{

width: 400%;

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

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

</body>

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>

<head>

<title>Client</title>

.box{

width: 200px;

height: 200px;

position: absolute;

border: 1px yellowgreen solid;

margin: 10px 0 0 0;

padding: 10px;

}

</style>

</head>

<body>

</body>

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>

<head>

<title>offset</title>

</head>

<body>

</div>

</body>

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>

<head>

<title>scroll</title>

padding: 0;

margin: 0;

}

</style>

</head>

</div>

</body>

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>

posted on 2018-08-20 16:48 pandaboy1123 阅读(137) 评论(0) 编辑收藏举报

刷新页面返回顶部

Reproducing the GitHub Ribbon in CSS

路飞学城Python-Day52

导航

公告