潭州课堂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, ...
随机推荐
- [转]HEX文件格式解析
1.前言 本文主要讲述keil MDK 下STM32编译生成的的HEX镜像文件格式.并说明镜像load地址是如何添加进HEX文件的. 2.keil MDK如何在HEX文件中添加load addr 通过 ...
- oracle instantclient_11_2 配置文件tnsnames.ora
文件所在位置(不同版本位置可能不同): oracle\product\10.2.0\client_1\NETWORK\ADMIN\tnsnames.ora WDDB = (DESCRIPTION = ...
- mysql安装与卸载（绿色版）
1.下载压缩包,解压 2.配置环境变量 PATH:%MYSQL_HOME%\bin 3.在安装目录下新建my.ini配置文件: [mysql] default-character-set=utf8 [ ...
- zabbix3.0.4关于java服务端程序内存溢出的处理
关于java服务端程序内存溢出的处理 java服务端程序内存溢出会产生jvm.log文件,此时程序会挂掉,无法正常处理业务,需要重启服务 思路: 当存在jvm.log这个文件的时候则触发clean_j ...
- centos6中创建软raid方法
raid概述: 组建raid阵列命令: mdadm:模式化的工具 /etc/mdadm.conf -A Assemble 装配模式 -C Create 创建模式 -C:专用 ...
- 转载：2.2.3 配置项的注释《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19628.html 如果有一个配置项暂时需要注释掉,那么可以加"#"注释掉这一行配置.例如: #pid ...
- 解决win 10下git bash中文乱码
解决步骤如下: 1.在git bash窗体下右键,选择options 2.在打开的配置窗口左侧选择 Text,然后在右侧选择locale为zh_CN,Character set 为GBK,点击OK保 ...
- 设置滚动条scrolltop
scrolltop用来设置页面的滚动条的位置 兼容性:链接 $().scrolltop(值)
- OneNET麒麟座应用开发之五：获取加速度传感器ADXL345数据
由于数据采集站基本都安装在野外或者楼顶,安装位置以及震动对检测数据的准确性有一定影响.所以想要有一个位置状态数据,正好发现麒麟作上有ADXL345,这样一个数字输出的加速度传感器.如图中红框所示: 1 ...
- IntelliJ IDEA2017 使用教程
一:安装教程 请参考<Windows7下安装与破解IntelliJ IDEA2017> 二:目录说明 三:开发界面