潭州课堂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, ...
随机推荐
- UML和模式应用4：初始阶段(7)--其它需求
1.前言 本文主要讲述除用例的其它需求制品. 2.TODO
- JS禁止鼠标右键、禁止全选、复制、粘贴的方法（所谓的防盗功能）
简述:一个防君子不防小人的鸡肋的功能,针对小白还行. 代码如下: <script> //都能支持 document.oncontextmenu = function (e) { retur ...
- CentOS 6.5使用Corosync + pacemaker实现httpd服务的高可用
Corosync:它属于OpenAIS(开放式应用接口规范)中的一个项目corosync一版本中本身不具备投票功能,到了corosync 2.0之后引入了votequorum子系统也具备了投票功能了, ...
- 转载：2.2.5 在配置中使用变量《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19630.html 有些模块允许在配置项中使用变量,如在日志记录部分,具体示例如下.log_format main '$remot ...
- SKlearn库学习曲线
思想: # 1.现将所有样本用交叉验证方法或者(随机抽样方法) 得到 K对 训练集-验证集# 2.依次对K个训练集,拿出数量不断增加的子集如m个,并在这些K*m个子集上训练模型.# 3.依次在对应训练 ...
- java 数据的存储
1. 寄存器. 这是最快的存储区,因为它位于不同于其他存储区的地方 -- 处理器的内部.但是寄存器的数量极其有限,所以寄存器根据需求进行分配.你不能直接控制,也不能在程序中感觉到寄存器存在的任何迹象. ...
- LeetCode（52）：N皇后 II
Hard! 题目描述: n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回 n 皇后不同的解决方 ...
- java jvm 字节码 实例
https://blog.csdn.net/wuzhiwei549/article/details/80626677 代码 package strings; //: strings/WhitherSt ...
- html中hr的各种样式使用
第一种: <hr style=" height:2px;border:none;border-top:2px dotted #185598;" /> height:2p ...
- POJ - 1185 敌兵炮阵
POJ - 3254 中文题.. 思路:这题可把我恶心坏了,我刚开始的思路其实是正确的... 首先我想开个dp[i][s1][s2]保存到 i行 为止当前行状态为s1,上一行状态为s2 的最大个数,然 ...