潭州课堂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, ...
随机推荐
- vsftpd控制用户禁止访问上级目录 只能访问自己目录
涉及文件: vsftpd.conf chroot_list_file=/etc/vsftpd.chroot_list 如果设置为 chroot_local_user＝YES chroot_list_e ...
- Linux Makefile 中的陷阱【转】
转自:https://blog.csdn.net/QQ1452008/article/details/52247944 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...
- ruia笔记
ruia笔记 loop = loop or asyncio.new_event_loop() get_event_loop()方法仅在同样的线程中生效,如果在一个新线程中,应该用new_event_l ...
- 获取静态 selected的当前的value的值
<!DOCTYPE html><html><head><script>function checkField(val){alert("输入值已 ...
- jQuery 实现添加表格行，删除行，调用日期控件
$(function () { getdatepicker(); getdatetimepicker(); }); $(document).on('click','#addTable',addTr); ...
- 如何消除手机设置的字体大小对Cordova app（Android）界面font-size的影响
===================== 更新分割线 =================== 现在发现其实不需要用安卓编辑器打开,也能找到这个文件,路径是platforms\android\Cord ...
- 转载：《理解OAuth 2.0》 阮一峰
原文:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛 ...
- Android动态控制状态栏显示和隐藏
记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解. 其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先发 ...
- Java NIO系列教程（一）java NIO简介
这个系列的文章,我们开始玩一玩IO方面的知识,对于IO和NIO,我们经常会接触到,了解他们的基本内容,对于我们的工作会有特别大的帮助.这篇博文我们仅仅是介绍IO和NIO的基本概念,以及一些关键词. 基 ...
- MyBatis查询，返回值Map或List<Map>
一.返回值Map 1.mapper.xml <select id="selectUserMapLimitOne" resultType="java.util.Has ...