潭州课堂25班：Ph201805201 周五 (课堂笔记)
小三角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border-top: 30px solid transparent; /**透明色*/
border-right: 30px solid gray;
border-bottom: 30px solid transparent ; /**透明色*/
border-left: 30px solid transparent;
display: inline-block; /*块级拥有行类特性*/
}
div:hover{
border: 30px solid transparent;
border-left: 30px solid navy;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
控制背景图移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 350px;
width: 350px;
background: url("21.jpg") no-repeat; /* no-repeat 不平铺*/
}
</style>
</head>
<body>
<div></div>
<p>
<input type="button" value="上">
<input type="button" value="下">
<input type="button" value="左">
<input type="button" value="右">
</p> <script>
var btn = document.getElementsByTagName('input');
var box = document.getElementsByTagName('div')[0];
btn[0].onclick = function () {
// console.log('1')
box.style.backgroundPositionX = '0px'; // 背景图 X
box.style.backgroundPositionY = '0px'; // 背景图 Y
};
btn[1].onclick = function () {
// console.log('2')
box.style.backgroundPositionX = '0px'; // 背景图 X
box.style.backgroundPositionY = '-350px'; // 背景图 Y
};
btn[2].onclick = function () {
// console.log('3')
box.style.backgroundPositionX = '-350px'; // 背景图 X
box.style.backgroundPositionY = '0px'; // 背景图 Y
};
btn[3].onclick = function () {
// console.log('4')
box.style.backgroundPositionX = '-350px'; // 背景图 X
box.style.backgroundPositionY = '-350px'; // 背景图 Y
}
</script>
</body>
</html>
以这整张为背景，在 div 开4分之1 图大小窗口，控制背景图的 X/Y 的移动，
在输入框中的数据 + 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="-">
<input type="text" name="num">
<input type="button" value="+"> <script>
var obj = document.getElementsByTagName('input')
obj[0].onclick = function () {
obj[1].value -= 1
}
obj[2].onclick = function () { // 在 js 中 + 号表示字符串合并，这里 obj[1].value 是 str
obj[1].value = Number(obj[1].value) +1
}
</script>
</body>
</html>
局部刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test1{
height: 200px;
width: 200px;
background: skyblue;
}
.test{
width: 100%;
height: 8000px;
}
</style>
</head>
<body>
<div class="test1">参照</div>
<input type="button" value="登录">
<div class="test">
<!--<iframe src="http://www.taobao.com"></iframe>-->
</div> <script>
var btn = document.getElementsByTagName('input')[0];
btn.onclick = function (){
var box = document.getElementsByClassName('test')[0];
box.innerHTML = "<iframe style='' src=\"http://www.taobao.com/\"></iframe>"
}
</script>
</body>
</html>
潭州课堂25班：Ph201805201 周五 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 第十课 类的定义，属性和方法 (课堂笔记)
类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
- 潭州课堂25班：Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)
一.分析静态页面 1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...
- 潭州课堂25班：Ph201805201 django 项目 第三十一课 在线课堂视频点播的实现(课堂笔记）
在线课堂 一.数据库模型设计 # 在apps/course/models.py中定义如下模型: from django.db import models from utils.models impor ...
- 潭州课堂25班：Ph201805201 爬虫基础 第十五课 js破解 二 (课堂笔记）
PyExecJs使用 PyExecJS是Ruby的ExecJS移植到Python的一个执行JS代码的库. 安装 pip install PyExecJS 例子 >>> import ...
- 潭州课堂25班：Ph201805201 爬虫基础 第八课 selenium (课堂笔记）
Selenium笔记(1)安装和简单使用 简介 Selenium是一个用于Web应用程序测试的工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, ...
随机推荐
- 五、regularized线性回归练习（转载）
转载链接:http://www.cnblogs.com/tornadomeet/archive/2013/03/17/2964515.html 前言: 本节主要是练习regularization项的使 ...
- 【转】每天一个linux命令(1)：ls命令
ls命令是linux下最常用的命令.ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单.如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单. 通过ls命令不仅可以查看linux ...
- 现代C++之理解decltype
现代C++之理解decltype decltype用于生成变量名或者表达式的类型,其生成的结果有的是显而易见的,可以预测的,容易理解,有些则不容易理解.大多数情况下,与使用模板和auto时进行的类型 ...
- ANN算法总结
kd-tree kd-tree works poorly in high dimensions (k<30) 自己实验的时候差不多20到30左右吧,超过之后,就真的很慢了 faiss suppo ...
- Java 导入数据到Excel并提供文件下载接口
作者:Howie_Y链接:https://juejin.im/post/5ab4799451882521d6577fe4 最近的项目中遇到了一个将数据库的信息导入到一个 Excel 文件的需求,而且还 ...
- 基于vue的UI框架集锦
前端框架百花齐放.争奇斗艳,令人眼花缭乱.大神们一言不合就整一个框架出来,另小白们无所适从.下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀. (1)Eleme ...
- Optimization algorithm----Deep Learning
深度学习中的优化算法总结 以下内容简单的汇总了在深度学习中常见的优化算法,每个算法都集中回答:是什么?(原理思想)有什么用?(优缺点)怎么用?(在tensorflow中的使用) 目录 1.SGD 1. ...
- php协程
多任务 (并行和并发) 在讲协程之前,先谈谈多进程.多线程.并行和并发. 对于单核处理器,多进程实现多任务的原理是让操作系统给一个任务每次分配一定的 CPU 时间片,然后中断.让下一个任务执行一定的时 ...
- poj3264 倍增法（ST表）裸题
打出st表的步骤:1:建立初始状态,2:区间按2的幂从小到大求出值 3:查询时按块查找即可 #include<iostream> #include<cstring> #incl ...
- Java列表、数组、字符串
列表(list) list中添加,获取,删除元素 添加方法是:.add(e): 获取方法是:.get(index): 删除方法是:.remove(index), 按照索引删除: .remove(Obj ...