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 为主,初学者掌握本文的内容后,将能 ...
随机推荐
- mac Access denied for user 'root'@'localhost' (using password: YES)
1:苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务 2: Start it in safe mode 进入终端 输入: cd /usr/local/mysql ...
- Spark On YARN启动流程源码分析（一）
本文主要参考: a. https://www.cnblogs.com/yy3b2007com/p/10934090.html 0. 说明 a. 关于spark源码会不定期的更新与补充 b. 对于spa ...
- 10-3 LVM（逻辑卷管理器）
LVM(逻辑卷管理器) 允许对卷进行方便操作的抽象层,包括重新设定文件系统的大小 允许在多个物理设备间重新组织文件系统 将设备指定为物理卷 用一个或者多个物理卷来创建一个卷组 物理卷是用固定大小的物理 ...
- 学习Yii(2)
Yii拥有很好的手册,还是中文的,官方的手册很详细.还是应该好好看一下.今天就开始跟着项目代码调试. 上次看到入口脚本,学习一定要快,要用心,抓住时间.不然时间拖久了就忘了.延续不上,大打折扣.而且要 ...
- vim bundle安装
一.准备工作 安装Git(因为下面我们选择的插件管理器需要使用到它)安装其他插件前首先需要选择一个Vim插件管理器,我这里选择的是Vundle,Vundle的工作过程中需要通过Git自动从远程创库同步 ...
- [转帖]Vim全键盘操作
https://www.cnblogs.com/pzqu/p/11416436.html Vim脱离鼠标第一步 平时不可缺少的会用到vim,但是避免不了鼠标,事实上,省略鼠标是完全可以的,没有想像中那 ...
- 实时监控服务器某个端口状态TCPing
在给客户做运维服务期间,发现了一个奇怪的现象:备份系统(第三方国产)告警日志显示,每天晚上备份服务器的客户端在3点左右离线然后上线,再离线再上线,每晚两次,很是诡异. 联系了厂家技术支持,前后花了两天 ...
- SQL SERVER导入EXCEL文件：未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
1.安装相关组件 2.程序生成属性32位改为64位
- 2019南昌网络赛 I. Yukino With Subinterval 树状数组套线段树
I. Yukino With Subinterval 题目链接: Problem Descripe Yukino has an array \(a_1, a_2 \cdots a_n\). As a ...
- ASP.NET跨平台、分布式技术架构技术栈概览 (迄今为止最全的.NET技术栈)
今天有个学技术的小兄弟问我,现在这么多的技术我要学哪个?我说你根据岗位来学,学好了哪一门都可以在社会上立足,如今已经早已不是我们当年学习IT时候那么单纯了,给他讲了很多,发现现在的技术栈变得层次复杂且 ...