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

随机推荐

js获取数组中任意一项
1.获取数组任一项在一些实际应用场景中,会要求实现一个随机的需求,随机获取某一项,来展示出来,都知道要通过javaScript的Math.random()方法来实现,这里我在Array的原型上添加了 ...
【hihocoder 1329】平衡树·Splay(Splay做法)
[题目链接]:http://hihocoder.com/problemset/problem/1329 [题意] [题解] 插入操作:-,记住每次插入之后都要把它放到根节点去就好; 询问操作:对于询问 ...
（9）使用JdbcTemplate【从零开始学Spring Boot】
整体步骤: (1) 在pom.xml加入jdbcTemplate的依赖: (2) 编写DemoDao类,声明为:@Repository,引入JdbcTemplate (3) 编写DemoS ...
0209利用innobackupex进行简单数据库的备份
利用innobackupex进行简单数据库的备份yum install perl-DBIyum install perl-DBD-MySQLyum install perl-Time-HiResyum ...
C#--excel操作控件--interop是什么
这个是微软出的操作excel的类库,为什么这个比NPOI的下载量少这么多?
[Unit Testing] Set the timeout of a Test in Mocha
Mocha uses a default timeout of 2000 ms. However, if for some reason that does not work for your use ...
GitLab 7.5.3 CentOS7安装和SMTP配置
CentOS 7安装GitLab还是比較简单的,依照官方文档的提示一步一步操作下来.就一个地方须要改动. 參考:GitLab安装说明在安装好以后,执行 gitlab-ctl reconfigure ...
hadoop权威指南(第四版)要点翻译(5)——Chapter 3. The HDFS(5)
5) The Java Interface a) Reading Data from a Hadoop URL. 使用hadoop URL来读取数据 b) Although we focus main ...
poj1179 区间dp（记忆化搜索写法）有巨坑！
http://poj.org/problem?id=1179 Description Polygon is a game for one player that starts on a polygon ...
C++字符串与指针所有的内容也就这么多了。
1.定义一个字符串数组并初始化,然后输出其中的字符串. #include <iostream> using namespace std;int main(){ char str[]=&qu ...

路飞学城Python-Day52

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

随机推荐

热门专题