路飞学城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>

路飞学城Python-Day52的更多相关文章

路飞学城—Python爬虫实战密训班第三章
路飞学城—Python爬虫实战密训班第三章一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫: - 定义调度器 - ...
路飞学城—Python爬虫实战密训班第二章
路飞学城—Python爬虫实战密训班第二章一.Selenium基础 Selenium是一个第三方模块,可以完全模拟用户在浏览器上操作(相当于在浏览器上点点点). 1.安装 - pip instal ...
路飞学城Python爬虫课第一章笔记
前言原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 之前看阮一峰的博客文章,介绍到路飞学城爬虫课程限免,看了眼内容还不错,就兴冲冲报了名,99块钱满足以下条件会返还并送书送视频. 缴 ...
路飞学城-Python开发集训-第3章
学习心得: 通过这一章的作业,使我对正则表达式的使用直接提升了一个level,虽然作业完成的不怎么样,重复代码有点多,但是收获还是非常大的,有点找到写代码的感觉了,遗憾的是,这次作业交过,这次集训就结 ...
路飞学城-Python开发集训-第1章
学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...
路飞学城-Python开发集训-第4章
学习心得: 学习笔记: 在python中一个py文件就是一个模块模块好处: 1.提高可维护性 2.可重用 3.避免函数名和变量名冲突模块分为三种: 1.内置标准模块(标准库),查看所有自带和第三方 ...
路飞学城-Python开发集训-第2章
学习心得: 这章对编码的讲解超级赞,现在对于编码终于有一点认知了,但还没有大彻大悟,还需要更加细心的琢磨一下Alex博客和视频,以前真的是被编码折磨死了,因为编码的问题而浪费的时间很多很多,现在终于感 ...
路飞学城-Python开发-第二章
''' 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家' ...
路飞学城-Python开发-第三章
# 数据结构: # goods = [ # {"name": "电脑", "price": 1999}, # {"name&quo ...
路飞学城-Python开发-第一章
# 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...

随机推荐

Netty学习总结（3）——Netty百万级推送服务
1. 背景 1.1. 话题来源最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...
navicat 为表添加索引
navicat 为表添加索引分析常用的查询场景,为字段添加索引,增加查询速度. 可以添加单列索引,可以添加联合索引. 右键,设计表中可以查看和添加修改索引! 索引一定要根据常用的查询场景进行添加! ...
redhat超级用户密码破解
1. 开机在出现grub画面,按e键 2. 用上下键选中第二项(类似于kernel /boot/vmlinuz-2.4.18-14 ro root=LABEL=/) 然后按e键编辑 3. 空格sing ...
多个线程运行结束之后主线程再执行CountDownLatch
多个线程运行结束之后主线程再执行CountDownLatch 学习了:http://blog.csdn.net/lvyuanj/article/details/50737123 这个要膜拜一下! h ...
[CSS3] :empty Selector
When the element has empty content, you might want to display some text to idicate the compoent is l ...
自己主动化的在程序中显示SVN版本号
有时候会有这种情况,策划拿着应用过来提一个bug,但我们却不好确定策划的手机上装的应用相应的是那个代码版本号. 为了解决问题.我们希望能在应用上显示出当前应用所相应的代码版本号,即svn版本号. 构想 ...
VmBox硬盘容量调整
硬盘容量修改为15*1024MB. VBoxManage.exe modifyhd "F:\VirtualBox\magiclinux.vdi" --resize 15360 ...
何时使用static类（工具类）
一个static类,指所有成员都是static方法构成的.而没有不论什么成员变量, 也称为Utility class 或者Utility Pattern [參考: Utility Pattern]．它 ...
HDU3496 Watch the Movie 背包
题目大意:给你n张电影门票,但一次只可以买m张,并且你最多可以看L分钟,接下来是n场电影,每一场电影a分钟,b价值,要求恰好看m场电影所得到的最大价值,要是看不到m场电影,输出0. 三个限制: 选电影 ...
利用SQLite在android上创建数据库
利用SQLite在android上创建数据库方法: 1.创建我们的数据库类继承SQLiteOpenHelper类完成相关函数的重写和数据库对象的初始化 public MySQLiteOpenHel ...

路飞学城Python-Day52

路飞学城Python-Day52的更多相关文章

随机推荐

热门专题