2020年09月_admin_djp

原创了解canvas画布

一、什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像画布是一个矩形区域，可以控制其每一像素canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法二、canvas基本使用添加canvas元素(创建画布)<canvas id="myCanvas" width="300" height="300"> </canvas>canvas画布的默认尺寸是300*150通过JavaScript绘制图像&l

2020-09-27 23:57:10 1851

原创 HTML5 Video和Audio

文章目录前言一、视频Video1.video常用属性2.video常用方法3.video支持的视频格式二、音频Audio1.audio常用属性2.audio支持的视频格式前言 HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。一、视频Video1.video常用属性autoplay：自动播放。值是au

2020-09-27 19:59:41 255

原创 JavaScript之节流与防抖

我们在开发的过程中会经常使用如scroll、resize、touchmove等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行节流或者防抖处理防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。简单防抖的实现：// 防抖function debounce(fn,

2020-09-21 00:40:45 53

原创 BOM History和location

一、History对象1.什么是HistoryHistory 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。2.history对象的方法back（）方法会让浏览器加载前一个浏览过的文档。 history.back（）等效于浏览器中的“后退”按钮forward（）方法会让浏览器加载后一个浏览的文档。hist

2020-09-20 21:10:34 194

原创获取窗口属性，获取dom尺寸

查看滚动条的距离window.pageXOffset/pageYOffsetie8及ie8以下不兼容document.body/document.Element.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值 var x = window.pageXOffset; var y = window.pageYOffset; console.log("pageXOffset:" + x,"pageYOf

2020-09-13 18:38:36 269

原创 JS定时器

基本语法setInterval() ：以指定时间为周期循环执行(循环定时器)setInterval(expression,milliseconds)setTimeout(): 只在指定时间后执行一次(延迟定时器) setTimeout(expression,milliseconds) 其中参数一既可以是字符串，也可以是匿名函数，或者是一个函数名，参数二是延时或者重复执行的毫秒数。创建定时器：setTimeout(function ()

2020-09-13 17:48:46 274

原创关于DOM的事件操作

事件的三要素事件的三要素：事件源、事件、事件驱动程序。比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。于是可以总结出：谁引发的后续事件，谁就是事件源。事件源：引发后续事件的html标签。事件：js已经定义好了。事件驱动程序：对样式和html的操作。也就是DOM。

2020-09-06 23:49:16 162

原创 innerText和innerHTML

几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内的文本表示形式和HTML源代码，这两个属性是可读可写的。<body><div id="one"> 这是一段文字 这是一段文字 这是一段文字 这是一段文字

2020-09-06 23:03:57 221

admin_djp的博客