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 为主,初学者掌握本文的内容后,将能 ...
随机推荐
- 强化学习——Q-learning算法
假设有这样的房间 如果将房间表示成点,然后用房间之间的连通关系表示成线,如下图所示: 这就是房间对应的图.我们首先将agent(机器人)处于任何一个位置,让他自己走动,直到走到5房 ...
- 中国行政区划表，包括34个省、直辖市的所有数据 mysql数据
中国行政区划表,包括34个省.直辖市的所有数据 sql文件地址 https://gitee.com/zwh_9527/ChinaProvince
- VC程序运行时间测试函数
VC程序运行时间测试函数 介绍 我们在衡量一个函数运行时间,或者判断一个算法的时间效率,或者在程序中我们需要一个定时器,定时执行一个特定的操作,比如在多媒体中,比如在游戏中等,都会用到时间函数.还比如 ...
- 幻数浅析（Magic Number）
在源代码编写中,有这么一种情况:编码者在写源代码的时候,使用了一个数字,比如0x2123,0.021f等,他当时是明白这个数字的意思的,但是别的程序员看他的代码,可能很难理解,甚至,过了一段时间,代码 ...
- nginx 配置用户认证
nginx 配置用户认证有两种方式: 1.auth_basic 本机认证,由ngx_http_auth_basic_module模块实现.配置段: http, server, location, li ...
- luogu P1115 最大子段和 (dp)
链接: https://www.luogu.org/problemnew/show/P1115 题面: 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一 ...
- vue移动端弹框组件
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- 盒模型中padding、border、margin的区别
在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...
- 粒子群算法（PSO）
这几天看书的时候看到一个算法,叫粒子群算法,这个算法挺有意思的,下面说说我个人的理解: 粒子群算法(PSO)是一种进化算法,是一种求得近似最优解的算法,这种算法的时间复杂度可能会达到O(n!),得到的 ...
- NOIP比赛中如何加速c++的输入输出
NOIP比赛中如何加速c++的输入输出 在竞赛中,遇到大数据时,往往需要更快的读取方式.由于比赛中输出一般规模较小,本文只讨论输入如何加速. 现在我们生成1000000个随机数,构成1000*1000 ...