web开发：javascript动画
一、鼠标事件
二、js盒模型
三、鼠标拖拽
四、键盘事件
五、其他时间应用
六、定时器
七、定时器案例
八、随机数
一、鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.sup {
width: 200px;
height: 200px;
background-color: orange;
margin: auto;
}
.sub {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script>
var box = document.querySelector('.box');
// 1. 点击事件
box.onclick = function () {
console.log("单击");
};
// 2. 双击事件(应用场景不广)
box.ondblclick = function () {
console.log("双击");
};
// 3. 鼠标右键
box.oncontextmenu = function () {
console.log("右键了");
return false;
};
// 4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开
box.onmouseover = function () {
console.log("悬浮");
};
box.onmousemove = function () {
console.log("移动");
};
box.onmousedown = function () {
console.log("按下");
};
box.onmouseup = function () {
console.log("抬起");
};
box.onmouseout = function () {
console.log("离开");
}
</script>
<script>
// over out | enter leave
var sup = document.querySelector('.sup');
var sub = document.querySelector('.sub'); sup.onmouseenter = function (ev) {
ev.cancelBubble = true;
console.log("enter 悬浮");
};
sup.onmouseover = function () {
console.log("over 悬浮");
};
sup.onmouseleave = function () {
console.log("leave 离开");
};
sup.onmouseout = function () {
console.log("out 离开");
}
// 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级
// 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发 // 悬浮子级:
// sub over => sup over 支持冒泡
// sup enter => sub enter 不支持冒泡 sub.onmouseenter = function (ev) {
ev.cancelBubble = true;
console.log("sub enter 悬浮");
};
sub.onmouseover = function () {
console.log("sub over 悬浮");
}; // 总结:
// 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合
// 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合
// 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以
</script>
</html>
二、js盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js盒模型</title>
<style>
.box {
width: 100px;
height: 100px;
background: gray;
padding: 20px;
border: 10px solid red;
}
.box {
position: absolute;
top: 30px;
left: 30px;
}
body {
position: relative;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box');
// width | height
var width = getComputedStyle(box, null).width;
console.log(width); // 100px => 100
console.log(parseInt(width));
// console.log(width.substr(0, 3)); // 从索引0开始截取3个长度
console.log(width.slice(0, 3)); // [0, 3) 开索引0开始截取到索引3之前 // padding: padding + width | padding + height
console.log(box.clientWidth);
console.log(box.clientHeight); // border: border + padding + width | border + padding + height
console.log(box.offsetWidth);
console.log(box.offsetHeight); // 匹配绝对定位的方位实现 => 映射绝对定位元素的 top | left 定位方位值
console.log(box.offsetTop);
console.log(box.offsetLeft); </script>
</html>
三、鼠标拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标拖拽</title>
<style>
.box {
width: 100px;
height: 100px;
background: gray;
padding: 20px;
border: 10px solid red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box'); // 事件之间的关系
box.onmousedown = function (ev) {
console.log("按下");
// 在该位置获取点击点相对于自身原点的偏移量
// 偏移量 = 鼠标点 - 盒子原点
var dX = ev.clientX - box.offsetLeft;
var dY = ev.clientY - box.offsetTop; // 触发使用频率的, 防止操作过快, 脱离了box, 但是还是在document中
document.onmousemove = function (ev) {
console.log("移动");
var x = ev.clientX;
var y = ev.clientY;
// 盒子默认原点跟随鼠标移动
// 减去100|100, 代表盒子的100,100点跟随鼠标移动
// 想让点击点跟随鼠标移动 => 减去鼠标在自身位置上的偏移量 box.style.left = x - dX + 'px';
box.style.top = y - dY + 'px';
}
};
box.onmouseup = function () {
document.onmousemove = null;
} </script>
</html>
四、键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style>
.box {
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
// 键盘长按会一直触发按下事件
document.onkeydown = function (ev) {
console.log(ev);
// 按下的键盘编号
console.log("按下", ev.keyCode);
// console.log(ev.which);
}
document.onkeyup = function (ev) {
console.log("抬起", ev.keyCode);
} // 左上右下: 37-40
var box = document.querySelector('.box');
document.onkeydown = function (ev) {
switch (ev.keyCode) {
case 37:
box.style.left = box.offsetLeft - 10 + 'px';
break;
case 38:
box.style.top = box.offsetTop - 10 + 'px';
break;
case 39:
box.style.left = box.offsetLeft + 10 + 'px';
break;
case 40:
box.style.top = box.offsetTop + 10 + 'px';
break;
}
}
</script>
</html>
五、其他时间应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>其他事件</title>
<script>
// 当页面加载完毕之后再回调
window.onload = function () {
var box = document.querySelector('.box');
console.log(box);
} // 页面滚动可以设置给 window | document
var isShow = false;
window.onscroll = function () {
console.log(window.scrollY);
if (window.scrollY >= 1200) {
if (!isShow) {
console.log("将返回Top按钮显示");
isShow = true;
}
} else {
if (isShow) {
isShow = false;
}
}
}
</script>
</head>
<body>
<div class="box"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body> </html>
六、定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body> </body>
<script>
// 1. 一次性定时器
// 三个参数: 逻辑函数, 时间间隔, 函数所需参数(一般情况下可以省略)
setTimeout(function (arg1, arg2) {
console.log(arg1, arg2);
console.log("页面已经加载1s了, 我再执行, 且就一次");
}, 1000, "所需参数", 100); // 2. 持续性定时器
function action() {
console.log("永久执行, 1s一次");
}
// 定时器第一次执行,一定是设置的时间间隔第一次达到
var timer = setInterval(action, 1000); // timer用来接收定时器,那就是代表定时器
// 不会立马执行逻辑, 需要立马执行逻辑可以通过功能的手动调用
action(); // 3.清除定时器
// 前提: 明确清除哪一个定时器还是页面所有的定时器
// clearTimeout | clearInterval, 但是两者是通的
document.onclick = function () {
clearTimeout(timer)
} // 结论:
// 1. 清除定时器直接可以混用
// 2. 创建定时器是有返回值的, 返回值就是创建定时器的数字标号
// 3. 对一个数字做定时器清除操作, 就会清除数字对应的定时器,
// 如果数字没有对应定时器, 相当于清除失败, 无副作用 // 需求: 如果页面中有n个定时器
var n = setTimeout(function () {}, 1);
for (var i = 1; i < n; i++) {
clearInterval(i)
}
</script> </html>
七、定时器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器案例</title>
</head>
<body>
<div class="box">12 : 01 : 35</div>
</body>
<script>
// 时间类
var date = new Date();
// 时间戳
console.log(date.getTime()) var box = document.querySelector('.box') // 1s更新一次时间
setInterval(updateTime, 1);
// 时间需要页面已加载就更新一次
function updateTime() {
// 获取时间
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// 格式化时间
h = h >= 10 ? h : "0" + h;
m = m >= 10 ? m : "0" + m;
s = s >= 10 ? s : "0" + s;
var res = h + " : " + m + " : " + s; // 更新时间(页面标签内容)
box.innerText = res;
}
updateTime();
</script>
</html>
八、随机数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数</title>
</head>
<body>
随机数
</body>
<script>
var randomNum = Math.random();
// 随机数的取值范围: [0, 1)
console.log(randomNum); // 要产生[n, m]之间的正整数
var r1 = parseInt(Math.random() * 11) + 5; // [5, 15]
var r2 = parseInt(Math.random() * 21) + 7; // [7, 27]
// var r3 = parseInt(Math.random() * (m - n + 1)) + n; // [n, m] function rFn(n, m) {
return parseInt(Math.random() * (m - n + 1)) + n;
}
for (var i = 0; i < 20; i++) {
console.log(rFn(3, 19))
} </script>
</html>
小结：
## 1.事件总结
- 鼠标事件
```js
var box = document.querySelector('.box');
// 1. 点击事件
box.onclick = function () {
console.log("单击");
};
// 2. 双击事件(应用场景不广)
box.ondblclick = function () {
console.log("双击");
};
// 3. 鼠标右键
box.oncontextmenu = function () {
console.log("右键了");
return false;
};
// 4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开
box.onmouseover = function () {
console.log("悬浮");
};
box.onmousemove = function () {
console.log("移动");
};
box.onmousedown = function () {
console.log("按下");
};
box.onmouseup = function () {
console.log("抬起");
};
box.onmouseout = function () {
console.log("离开");
}
```
var box = document.querySelector('.box');
// 1. 点击事件
box.onclick = function () {
console.log("单击");
};
// 2. 双击事件(应用场景不广)
box.ondblclick = function () {
console.log("双击");
};
// 3. 鼠标右键
box.oncontextmenu = function () {
console.log("右键了");
return false;
};
// 4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开
box.onmouseover = function () {
console.log("悬浮");
};
box.onmousemove = function () {
console.log("移动");
};
box.onmousedown = function () {
console.log("按下");
};
box.onmouseup = function () {
console.log("抬起");
};
box.onmouseout = function () {
console.log("离开");
}
```
```js
// over | out VS enter | leave
// 总结:
// 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合
// 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合
// 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以
// over | out VS enter | leave
// 总结:
// 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合
// 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合
// 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以
// 特性
// 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级
// 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发
// 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级
// 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发
// 悬浮子级:
// sub over => sup over 支持冒泡
// sup enter => sub enter 不支持冒泡
```
// sub over => sup over 支持冒泡
// sup enter => sub enter 不支持冒泡
```
- 键盘事件
```js
// onkeydown: 键盘按下会触发, 长按会持续触发
// onkeyup: 键盘抬起会触发
// onkeydown: 键盘按下会触发, 长按会持续触发
// onkeyup: 键盘抬起会触发
// ev.keyCode: 按下的键盘键的标号
```
```
- 其他事件
```js
// window.onload: 页面加载完毕触发
// window.onscroll | document.onscroll => window.scrollY(页面下滚距离): 页面滚动触发
```
// window.onload: 页面加载完毕触发
// window.onscroll | document.onscroll => window.scrollY(页面下滚距离): 页面滚动触发
```
## 二.js盒模型
```js
// content: 通过计算后样式获取
// padding + content: box.clientWidth | box.clientHeight
// border + padding + content: box.offsetWidth | box.offsetHeight
// 绝对定位top|left: box.offsetTop | box.offsetLeft
```
// content: 通过计算后样式获取
// padding + content: box.clientWidth | box.clientHeight
// border + padding + content: box.offsetWidth | box.offsetHeight
// 绝对定位top|left: box.offsetTop | box.offsetLeft
```
## 三.动画
- 定时器
```js
// 一次性定时器
var timeout = setTimeout(function(a, b){}, 1000, 10, 20);
// 一次性定时器
var timeout = setTimeout(function(a, b){}, 1000, 10, 20);
// 持续性定时器
var timer = setInterval(function(a, b){}, 1000, 10, 20);
var timer = setInterval(function(a, b){}, 1000, 10, 20);
// 清除定时器
// clearTimeout | clearInterval
// clearTimeout | clearInterval
//结论:
// 1. 定时器不会立即执行
// 2. 一次性定时器只执行一次, 持续性定时器不做清除的话会一直执行
// 3. 声明定时器第一个参数为逻辑函数地址, 第二个参数为事件间隔, 第三个为逻辑函数所需参数(可以为多个,一般省略)
// 4. 清除定时器可以混用, 本质就是清除创建定时器时的数字标号, 该编号就是创建定时器时的返回值
// 1. 定时器不会立即执行
// 2. 一次性定时器只执行一次, 持续性定时器不做清除的话会一直执行
// 3. 声明定时器第一个参数为逻辑函数地址, 第二个参数为事件间隔, 第三个为逻辑函数所需参数(可以为多个,一般省略)
// 4. 清除定时器可以混用, 本质就是清除创建定时器时的数字标号, 该编号就是创建定时器时的返回值
// 小技巧: 如果页面中有n个定时器
var n = setTimeout(function () {}, 1);
for (var i = 1; i < n; i++) {
clearInterval(i)
}
```
var n = setTimeout(function () {}, 1);
for (var i = 1; i < n; i++) {
clearInterval(i)
}
```
web开发：javascript动画的更多相关文章
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- 静态Web开发 JavaScript
三章 Javascript 1节javascript基本语法和注意事项 脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...
- Web开发——JavaScript基础（JSON教程）
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
- web开发：动画及阴影
一.小米拼接 二.过渡动画 三.过度案例 四.盒子阴影 五.伪类设计边框 一.小米拼接 将区域整体划分起名 => 对其他区域布局不产生影响提出公共css => reset操作当有区域发送显 ...
- 如何实现上下左右键盘控制焦点使之落在相邻文本框或下拉框中-Web开发/JavaScript
我用jquery只实现了文本框的移动(暂时上下移动等同于左右移动) $(function () { var cols = 1;//按一下跳几个控件 var obj = $("input[id ...
- RequestAnimationFrame更好的实现Javascript动画
一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实 ...
- 12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
- 【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...
- Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
随机推荐
- STM32命名规则解析
- 使用PostMan测试WebService接口
使用PostMan测试WebService接口 参考资料: 通过XML请求WebServer https://blog.csdn.net/qq_33933408/article/details/53 ...
- Gogs 设置Git钩子实现项目自动部署
每次修改代码需要上传到 git仓库,查看了一下 Gogs 使用文档 发现有 web钩子 这个选项,然后发现了本地可实现的 Git钩子. 注意:需要用到管理员帐号登录,进行仓库的设置. 有三种状态分别是 ...
- localstack环境搭建
前置 Python Docker Desktop 安装 1.使用pip安装aws-cli,则可以在cmd中使用aws命令: $pip install awscli 2.从dockerhub拉取kine ...
- Java基础——接口和抽象类
接口(interface) 什么是接口? 接口时抽象方法的合集.接口不可以被直接被实例化. 为什么要使用接口? 为了扩展.Java不支持多继承,但是通过接口就可以实现“多继承” 制定规则.接口就是规则 ...
- PJzhang:目录扫描复合工具dirmap
猫宁!!! 参考:https://www.freebuf.com/sectool/200890.html github地址: https://github.com/H4ckForJob/dirmap ...
- Java代码是怎么运行的
前言.... 作为一名 Java 程序员,你应该知道,Java 代码有很多种不同的运行方式.比如说可以在开发工具中运行,可以双击执行 jar 文件运行,也可以在命令行中运行,甚至可以在网页中运行.当然 ...
- RESTful规范与常用状态码
GET 安全且幂等 获取表示 变更时获取表示(缓存) 200(OK)-表示已在响应中发出 204(无内容) - 资源有空表示 301(Moved Permanently) - 资源的URI已被更新 3 ...
- [转帖]IBM开源Power指令集：国产高性能CPU迎来新机遇？
IBM开源Power指令集:国产高性能CPU迎来新机遇? https://www.cnbeta.com/articles/tech/880971.htm cnbeta的新闻.. 希望高性能CPU 能快 ...
- Ubuntu 下开发ARM
1. 准备工作 linux下自带虚拟串口的驱动,不需要手动安装.CP2102之类的USB转串口,是ttyUSBx. 所有的设备都在/dev目录下,简单扫描串口的办法: ls /dev > bef ...