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

随机推荐

使用VS Code断点调试PHP
vs code 使用一款杰出的轻量级代码编辑器,其中的插件工具不胜枚举而且还在不断增加.使用 vs code 调试 php 代码更是方便简洁,下面我们来一起看一下. 1. 安装 XDebug 扩展调 ...
firefox历史版本下载地址
http://ftp.mozilla.org/pub/firefox/releases/
Vijos——T 1092 全排列
https://vijos.org/p/1092 描述输入两个自然数m,n 1<=n<=20,1<=m<=n!输出n个数的第m种全排列. 如 :输入 3 1输出 1 2 3 ...
HDU 4510
省一等,保研. #include <iostream> #include <cstdio> #include <cstring> #include <algo ...
Notepad++ 设置执行 lua 和 python
Notepad++ 设置执行 lua 和 python 一.设置 run -> 设置 cmd /k lua "$(FULL_CURRENT_PATH)" & PAUS ...
leetcode第一刷_Minimum Depth of Binary Tree
非常easy的题目.只是还是认为要说一下. 最小深度.非常快想到bfs,层序遍历嘛.本科的时候实在是没写过多少代码,一開始竟然想不到怎么保存一层的信息.后来想到能够压入一个特殊的对象,每次到达这个对象 ...
18005 It is not ugly number
18005 It is not ugly number 时间限制:2000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题语言: G++;GCC Description ...
SICP 习题1.16-1.19体会
首先反思一下, 昨天做1.14的时候犯了一个严重错误.思维定式了,导致花了非常多无用功. 1.14的关键是要想到2个物理意义. 一个是广度优先, 也就是仅仅考虑问题递归树的第一层子数.那么必定有公式 ...
Spark部分：几个重要的端口汇总
50070:HDFSwebUI的端口号 8485:journalnode默认的端口号 9000:非高可用访问数rpc端口 8020:高可用访问数据rpc 8088:yarn的webUI的端口号 808 ...
Fitnesse FIT的使用
FIT是fitnesse使用的默认的引擎(SLIM的使用在上一篇文章中说明),不需要特别声明即可使用执行表格测试,所有编写的fixture都需要继承Fit的Fitxture 编写测试用例前需要先声明c ...

路飞学城Python-Day52

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

随机推荐

热门专题