潭州课堂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, ...
随机推荐
- MySQL版本升级参考资料【转】
MySQL升级参考资料 MySQL 升级的最佳实践 - 技术翻译 - 开源中国社区https://www.oschina.net/translate/mysql-upgrade-best-practi ...
- mysql锁表与不锁表设置主从复制的方法
有时候MySQL主从同步不一致比较严重的时候,需要手动同步.先说说在锁表的情况下如何操作:以下是其简要过程 1.先对主库锁表FLUSH TABLES WITH READ LOCK; 2.备份数据mys ...
- centos6.7环境之kvm虚拟化quem工具配置及使用详解
环境准备 需要勾选CPU的虚拟化支持,支持cpu虚拟化的CPU列表: intel支持虚拟化技术CPU列表: Intel 6 Cores / 12 Threads CPU Number: Code Na ...
- centos7.2环境编译安装mysql5.5.48
一.安装cmake编译工具 跨平台编译器 查看是否已经安装了gcc # rpm -qa | grep gcc # yum install -y gcc-c++ # yum install -y cma ...
- centos6中创建软raid方法
raid概述: 组建raid阵列命令: mdadm:模式化的工具 /etc/mdadm.conf -A Assemble 装配模式 -C Create 创建模式 -C:专用 ...
- 如何用jQuery获得select的值
如何用jQuery获得select的值,在网上找了看了一下,下面将总结一下: 1.获取第一个option的值 $('#test option:first').val(); 2.最后一个o ...
- Android数据存储：Shared Preferences
Android数据存储之SharedPreferences 在Android系统中提供了多种存储技术.通过这些存储技术可以将数据存储在各种存储介质上, Android 为数据存储提供了如下几种方式:1 ...
- sqlserver循环
普通while循环 1 循环5来修改学生信息 循环遍历修改记录 DECLARE @i int set @i=0 while @i<5 BEGIN update Student set demo ...
- Python-JS中的事件详解
目录 fdf!! fefd 一.JS中的事件二.JS中的事件分类: 1.事件初级: 2.事件参数 Event 3.鼠标事件 4.键盘事件 *** 5.表单事件 *** 6.文档事件 * 7.图片事件 ...
- InnoDB的关键特性-插入缓存，两次写，自适应hash索引
InnoDB存储引擎的关键特性包括插入缓冲.两次写(double write).自适应哈希索引(adaptive hash index).这些特性为InnoDB存储引擎带来了更好的性能和更高的可靠性. ...