潭州课堂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';                      // 背景图 Xbox.style.backgroundPositionY = '0px';                   // 背景图 Y};btn[1].onclick = function () {// console.log('2')box.style.backgroundPositionX = '0px';                      // 背景图 Xbox.style.backgroundPositionY = '-350px';                   // 背景图 Y};btn[2].onclick = function () {// console.log('3')box.style.backgroundPositionX = '-350px';                      // 背景图 Xbox.style.backgroundPositionY = '0px';                   // 背景图 Y};btn[3].onclick = function () {// console.log('4')box.style.backgroundPositionX = '-350px';                      // 背景图 Xbox.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>

转载于:https://www.cnblogs.com/gdwz922/p/9417213.html

潭州课堂25班：Ph201805201 周五 (课堂笔记)相关推荐

潭州课堂25班：Ph201805201 第十课类的定义，属性和方法 (课堂笔记)
类的定义共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
潭州课堂25班：Ph201805201 爬虫基础第十五课 js破解二 (课堂笔记）
PyExecJs使用 PyExecJS是Ruby的ExecJS移植到Python的一个执行JS代码的库. 安装 pip install PyExecJS 例子 >>> import ...
潭州课堂25班：Ph201805201 第十三课文件 (课堂笔记)
对文件的操作, open('h:\\asa.txt') r 以只读方式打开 w 以写入方式打开,会覆盖已文件 X 如果已存在,会异常 a 如果文件存在,则在 ...
潭州课堂25班：Ph201805201 爬虫基础第一课 (课堂笔记)
爬虫的概念: 其实呢,爬虫更官方点的名字叫数据采集,英文一般称作spider,就是通过编程来全自动的从互联网上采集数据. 比如说搜索引擎就是一种爬虫. 爬虫需要做的就是模拟正常的网络请求,比如你在网站 ...
c潭州课堂25班：Ph201805201 MySQL第二课 (课堂笔记)
mysql> create table tb_2( -> id int, -> name varchar(10) not null -> ); 插入数据 insert into ...
潭州课堂25班：Ph201805201 django 项目第三十三课后台文章标签查询提交到前台，删除功能实现(课堂笔记）...
在视图中创建个类,要实现此功能,并把结果返回前台 , from django.shortcuts import render from django.views import View from dj ...
潭州课堂25班：Ph201805201 爬虫基础第九课图像处理- PIL (课堂笔记）
Python图像处理-Pillow 简介 Python传统的图像处理库PIL(Python Imaging Library ),可以说基本上是Python处理图像的标准库,功能强大,使用简单. 但是由 ...
潭州课堂25班：Ph201805201 django 项目第三十九课后台文章发布，图片上传到 FastDFS后端实现七牛云讲解（课堂笔记）...
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数上传图片到七牛云注册 https:// ...
潭州课堂25班：Ph201805201 django框架第五课自定义简单标签，包含标签，模型类创建，梳理类创建 (课堂笔记)...
自定义标签同自定义过渡器一样,要创建文件,在配置文件中以APP方法注册,对方法进注册,在 html 文件中引入,.. 由模板传参在在配置文件中改时区: 由视图函数传参包含标签: 当有这种重复的代 ...

潭州课堂25班：Ph201805201 周五 (课堂笔记)

潭州课堂25班：Ph201805201 周五 (课堂笔记)相关推荐

最新文章

热门文章