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

随机推荐

【ACM】NYOJ_506_洗澡_20130725
洗澡时间限制:1000 ms | 内存限制:65535 KB 难度:1描述 Mostrp是个爱干净的好少年. 有一次去澡堂洗澡时发现澡堂的澡柜编号中没有出现过数字‘4’. Mostrp 感到很好 ...
HDU 3432
水题,就是把一个矩形平分. 题意:一个wid*hei的矩形,过底边上的一点(dor,0)做m-1条射线,把这个矩形的面积平均分成m份,求这些射线和矩形的另外一个交点. 直接枚举,然而求三角形高底移动坐 ...
Notepad++ 设置执行 lua 和 python
Notepad++ 设置执行 lua 和 python 一.设置 run -> 设置 cmd /k lua "$(FULL_CURRENT_PATH)" & PAUS ...
win server 2008 r2 iis+php 500错误内部服务器错误。
今天遇到一个错误是iis 500错误,由于server是别人负责的.查看日志没什么异常,就发如今任务日志里发现有一段时间间隔没有记录.一開始不知道为什么.之后日志里就都是500错误了,在iis哪里配置 ...
Android之怎样更改获取焦点的先后顺序
在组件中增加<requestFocus />能够首先获得焦点以TextView为例: 例如以下: <TextView android:layout_width=&q ...
Linux用户和组的管理
一.概述: 1.Linux下的三类用户: (1).超级用户(root)具有操作系统的一切权限UID值均为0 (2).普通用户具有操作系统有限的权限UID值500~6000 (3).伪用户是为了方便系统 ...
国外物联网平台初探（六） ——Electric Imp
公司背景 Electric Imp成立于2011年,公司设立在美国加利福尼亚州洛斯阿尔托斯和英国剑桥公司投资者包括:富士康技术集团.PTI创投.Rampart资本.Redpoint创投定位 Ele ...
Object源码分析（二）
第五个方法:protected native Object clone() throws CloneNotSupportedException; 源码简介: clone方法首先会判对象是否实现了Clo ...
线段树（1）——点修改&建树
#include<cstdio> #include<algorithm> using namespace std; #define MAX 10000 #define INF ...
NSKeyedUnarchiver归档
把自定义的类对象编码到NSData中 NSData *data = [NSKeyedArchiver archivedDataWithRootObject:bc];//归档,bc是一个自定义的类对象, ...

路飞学城Python-Day52

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

随机推荐

热门专题