![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5
雾里看花叹朦胧
心有多大,天有多高。
展开
-
HTML5多线程之--Worker 线程完成轮询
有时,浏览器需要轮询服务器状态,以便第一时间得知状态改变。这个工作可以放在 Worker 里面。function createWorker(f) { var blob = new Blob(['(' + f.toString() +')()']); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); return worker;}var pollingWorker = createWork转载 2020-06-24 11:53:24 · 868 阅读 · 0 评论 -
HTML5多线程之--同页面的 Web Worker
通常情况下,Worker 载入的是一个单独的 JavaScript 脚本文件,但是也可以载入与主线程在同一个网页的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>同页面的 Web Worker</title></head><body> <script type="app/worker" id=原创 2020-06-24 11:50:11 · 393 阅读 · 0 评论 -
HTML5多线程之--Worker
JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这转载 2020-06-24 11:35:19 · 446 阅读 · 0 评论 -
HTML5多线程之-- SharedWorker
使用如下这种URL的方式创建的 worker 称为专用 Worker(Dedicate Worker)。new worker("url");而共享Workers(SharedWorker)的目的,是希望通过防止重复专用 Worker 来降低系统的资源使用。有点类似于抽取共通方法的思想。SharedWorker 接口代表一种特定类型的 worker,可以从几个浏览上下文中访问,例如几个窗口1、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口,具有不同的全局作用域, S原创 2020-06-24 10:51:24 · 959 阅读 · 0 评论 -
JS实现窗口拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> .draggable{ width: 300px; ...原创 2020-04-09 23:41:41 · 309 阅读 · 0 评论 -
Html5 Storage Web SQL 示例
整个项目目录结构如下:具体示例如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...原创 2019-05-01 21:13:48 · 209 阅读 · 0 评论 -
DOM drag 事件
拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。拖拉的对象有好几种,包括元素节点、图片、链接、选中的文字等等。在网页中,除了元素节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让元素节点可拖拉,可以将该节点的draggable属性设为true。&lt;div draggable="true"&gt; 此...原创 2019-03-08 11:38:33 · 3722 阅读 · 3 评论 -
DOM change 事件
change事件当、、的值发生变化时触发。它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发,另一方面input事件必然伴随change事件。具体来说,分成以下几种情况。激活单选框(radio)或复选框(checkbox)时触发。用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。当文本框或元素的值发生改变,并且丧失焦点时触发。下...原创 2019-03-08 10:00:12 · 1813 阅读 · 0 评论 -
DOM select 事件
select事件当在<input>、<textarea>里面选中文本时触发。选中的文本可以通过 event.target 元素的 selectionDirection、selectionEnd、selectionStart 和 value 属性拿到。示例如下:<!DOCTYPE html><html lang="en"><head&g...原创 2019-03-07 18:27:46 · 758 阅读 · 0 评论 -
DOM input 事件 值发生变化时触发
input事件当&lt;input&gt;、&lt;select&gt;、&lt;textarea&gt;的值发生变化时触发。对于复选框(&lt;input type=checkbox&gt;)或单选框(&lt;input type=radio&gt;),用户改变选项时,也会触发这个事件。另外,对于打开contenteditable属性的元素,只要值原创 2019-03-07 17:52:40 · 2958 阅读 · 0 评论 -
使用Promise实现图片的预加载
如下是项目的整体结构:实现代码如下:const preLoadImg = function (path) { return new Promise(function (resolve, reject) { const img = new Image(); img.onload = resolve; img.onerror = rejec...原创 2019-03-04 16:42:11 · 1712 阅读 · 3 评论 -
CSS :after伪类元素实现文字两端对齐
以前很多人都这么干过:两个字中间使用&amp;nbsp;来隔开达到四个字的宽度,三个字也可以,但是,如果文字中包含有数字、大小写英文字母时,比如 “122账号”“abc密码” 这样的,就不好计算该用几个空格了。现在 CSS3 中可以使用 text-align: justify 样式来实现这个效果。例如,如下登录界面,需要实现“用户名:” 和 &quot;密码:&quot;文本的两端对齐效果。&amp;lt;body&原创 2019-02-20 15:50:16 · 2940 阅读 · 0 评论 -
JS html 实现全屏
首先,根据如下警告信息,可以看出,无法自动实现全屏功能,必须要手动才可以. Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.所以要实现全屏你可以通过点击一个 button 控件,或是整个 document 添加一个click 事件,通过点击来手动实现全原创 2017-12-28 10:28:55 · 13612 阅读 · 0 评论 -
html5使用canvas实现小球碰撞反弹实例
使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单.index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bouncing balls</title> <link rel="stylesheet" href="style.css"></he原创 2017-12-27 11:38:40 · 6053 阅读 · 7 评论 -
使用 canvas 画圆
使用原生的 HTML5 和 JS ,在屏幕中动态生成随机的 50 个小圆:arc()画圆弧的方法: context.arc(x,y,r,sAngle,eAngle,counterclockwise);arc(圆心的x坐标,圆心的y坐标,圆的半径,起始角(以弧度计,即l圆心的3点钟位置是0度),结束角,规定应该是顺时针还是逆时针画图)其中最后一个参数是可选的,true=逆时针,false =顺时原创 2017-12-25 14:11:02 · 665 阅读 · 0 评论 -
HTML5页面实现文件下载
HTML5页面实现文件下载: 非 IE 浏览器可以直接使用 HTML5中的 <a> 标签来实现下载,如下:<a href="a/a.txt" download="b.txt">点击下载文件</a><!-- not IE -->IE浏览器需要调用系统的 SaveAs 方法来实现,具体代码如下: html:<原创 2017-08-10 12:33:04 · 5547 阅读 · 0 评论