html css js
关注
分享
扫一扫
大狗狗
这个作者很懒，什么都没留下…
展开
-
html5 canvas arcTo方法心得
html5 canvas 画弧线原创 2022-12-21 11:55:05 · 301 阅读 · 0 评论 -
html5离线缓冲（service worker）
最简单示例程序原创 2022-06-24 11:48:03 · 349 阅读 · 0 评论 -
html5 canvas绘图模糊总结
canvas绘图过程中出现模糊情况及解决办法原创 2022-05-12 22:05:17 · 2277 阅读 · 0 评论 -
JS 程序中可能存在的内存泄漏
目录：不正当的闭包隐式全局变量游离DOM引用遗忘的定时器遗忘的事件监听器排查问题一、不正当的闭包闭包是指有权访问另一个函数作用域中的变量的函数，通常情况闭包就是函数内部嵌套并 return 一个函数。function fn1(){ let test = 'isboyjc' return function(){ console.log('hahaha') }}let fn1Child = fn1()fn1Child()上面是是一个典型闭包，但是它并没有造成内存泄转载 2022-03-30 12:24:01 · 911 阅读 · 0 评论 -
html5 ApplicationCache的两个坑
注：浏览器以chrome为例1.MANIFEST文件的加载晚于DOM的加载。所以当浏览器发现有更新并下载后，网页其实已显示了出来，不过还是旧版！想让新内容显现需要reload。var cache = window.applicationCache;var count = 0;if(window.navigator.onLine){ cache.addEventListener('noupdate', function(e){ console.log("没有更新可用")原创 2021-10-02 07:52:51 · 325 阅读 · 0 评论 -
jquery获取鼠标位置(兼容原生js)
e.offsetX/e.offsetY 鼠标点距绑定事件的dom源左上角距离e.clientX/e.clientY 鼠标点距浏览器客户区左上角距离e.pageX/e.pageY 鼠标点距浏览器文档左上角距离e.screenX/e.screenY 鼠标点距屏幕左上角距离注：1.有文章说firefox不支持offsetX/offsetY，经测试新版firefox已支持了。这样以上4种位置实现了主要浏览器的兼容(IE/Chrome/Firefox)2.当body没有滚动条时,offset和原创 2021-08-31 12:34:30 · 588 阅读 · 0 评论 -
消除canvas闪烁
canvas的闪烁主要和平台有关，如何去避免需要慢慢积累经验。1. clearRect造成闪烁使用clearRect清空局部区域后重绘能会造成闪烁。PC上问题不大，移动端比较明显。（注clearRect(0,0,canvas.width,canvas.height)也会闪烁，除非是clearRect(0,0,canvas.width+1,canvas.height+1)）。原因：可能是canvas抗锯齿的动作导致。关于该问题的分析见：https://stackoverflow.com/que原创 2021-08-26 15:59:32 · 3838 阅读 · 1 评论 -
[cache和buffer的区别]canvas的缓冲绘图
canvas的缓冲绘图涉及到两个概念，一是“双缓冲”，二是"预渲染"。双缓冲历史已久。记得当年学习windows编程时就用到了双缓冲技术，先在内存中开辟一块画布，在上面执行完绘制操作后，把该内存画布作为一幅图片整体投射到屏幕上。这样可以避免显示器闪烁。而预渲染则是把图画中常用到的一些背景部分预先画到一个buffer上，当动画中需要显示该部分时，直接从buffer上拷过来用就行了。"双缓冲"和"预渲染"是两个不同的技术。需要注意的是：在html5 canvas编程中，已不需要双缓冲了。因为浏览器已原创 2021-08-23 19:00:52 · 996 阅读 · 0 评论 -
JS用匿名函数封装库
var Test = (function(){ var global = 123; return function(value){ var local = value; this.add = function(){ console.log(global += local); } }})();new Test(2).add();//125new Test(2).add();//127new Test(2).add();//129.原创 2021-08-13 12:23:48 · 232 阅读 · 0 评论 -
viewport 说明
手机的DPI要大大高于PC显示器。在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性。这个属性可以反映出手机和一般PC在DPI上的差距。比如我的vivo x27手机其devicePixelRatio值为3，就是x27的DPI是一般PC的3倍。也就意味着如果你在网页中定义的大小（字体或者图形尺寸）在PC上看起来大小正好的话，放到我手机上大小只有PC上的1/3，会感觉到小的不行。比如高25个像素的按钮在PC上感觉正好，那么在手机上就得定义成75像素，不然会太小难以操原创 2021-03-27 21:14:50 · 202 阅读 · 0 评论 -
js 怎样判断用户是否在浏览当前页面
转自：https://www.cnblogs.com/csuwujing/p/10315309.html有些时候我们需要在项目中判断用户是否在浏览当前页面，或者当前页面是否处于激活状态。然后再进行相关的操作。浏览器中可通过window对象的onblur、onfocus判断，或者document的hidden属性判断。1、window.onblur & window.onfocus关于是否失焦点，浏览器对象有onfocus和onblur事件可以监听。但是触发这两个事件的前提是页面之前是..转载 2020-08-13 13:34:31 · 838 阅读 · 0 评论 -
获取元素在文档中的位置
视口、窗口，文档，屏幕座标，窗口座标，逻辑座标。这些概念是我在学习《windows程序设计》时接触到的。在学习js/jquery/css时也会遇到类似概念。感觉有点混乱，自己去理解好了，程序里能运行就是正确的。首先“文档”是什么？我认为文档就是窗口中的内容。如果文档的尺寸超过窗口尺寸，那么窗口就可以显示滚动条。我想获取文档中某处元素(domx)到文档开头(dom0)的距离。可以使用以下方法：方法1：domx.offsetTop方法2：$(domx).offset().top -$(dom0)..原创 2020-07-18 22:29:20 · 432 阅读 · 0 评论 -
图像为什么刷新一下才能显示？启动时是空白页，这是怎么回事？
转载自：https://bbs.youkuaiyun.com/topics/390057728弄了很久才用<canvas>标签显示出图像来，可是启动浏览器之后必须刷新一下才能看到图像，不然就是空白的什么都没有。哪里的问题。。。。。。[html文件]<!DOCTYPEhtml><html><head><title>javascript&...转载 2020-03-08 11:09:24 · 601 阅读 · 0 评论 -
html5 audio异步模式测试
setTimeout(fun1(),0);fun2();fun1必需要等于fun2执行完成后才能运行，即使是把延时设为0毫秒。如果fun2是一个比较费时的操作，感觉尤为明显。原创 2020-02-17 21:17:19 · 809 阅读 · 0 评论 -
IE6中json名称不要使用new
比如：var obj = {"old":"123","new":"456"};使用：obj.new在IE6或IE兼容模式下，使用new作为json的名称会出现错误。解决办法：改成其它名称，不要用new就行。原创 2013-04-08 15:55:47 · 710 阅读 · 0 评论 -
js正则表达式笔记
在正则表达式当中有个东西叫做前瞻表达式 名称 描述 (?=exp) 正向前瞻 匹配后面满足表达式exp的位置 (?!exp) 负向前瞻 匹配后面不满足表达式exp的位置 (?<=exp) 正向后瞻 匹配前面满足表达式exp的位置（JS不支持） (?<!exp) 负向后瞻 匹配前面不满足表达式exp的位置（J...转载 2018-12-09 17:31:13 · 269 阅读 · 0 评论 -
关于table中使用了colspan后导致列宽度失效问题
因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开，但是如果首行有合并单元格的话 TD宽度定义就会失效。最好的办法，在最上边加以下代码来控制td宽度<colgroup> <col width=60%></col> <col width=20%></col> ...原创 2018-12-16 20:32:02 · 3547 阅读 · 0 评论 -
js splice方法的返回值
参考：http://www.w3school.com.cn/jsref/jsref_splice.asp如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 var a = [1,2,3];a= a.splice(2,1);//这样写就错了a.splice(2,1);//正确...原创 2019-01-17 12:02:30 · 3394 阅读 · 0 评论 -
html5 canvas画粗线时座标指定注意事项
画粗线时，座标不能定位在画布边界上，就是0或者width或者height。这是因为canvas画线粗线时是以你给定座标值为中心向两侧绘制，如果把座标定位到画布边界上，那么画出来的线就只有你给定粗细值的一半。...原创 2019-02-26 10:26:34 · 402 阅读 · 0 评论 -
【转】css禁止文字被选中
原文地址：http://www.cnblogs.com/hkx520/p/7617410.html有时候，为了让用户有更好的体验，需要禁用掉文本选中功能比如：使用a标签模拟按钮，如果不禁用掉文本选中功能，那么双击时会选中文字，用起来很不爽。多数情况下，只需要使用CSS样式就可以实现这个功能啦：body{ -o-user-select: none; -moz-user-se...转载 2018-11-21 17:59:56 · 312 阅读 · 0 评论 -
子元素absolute定位时父元素有无relative的区别
原文：https://blog.youkuaiyun.com/Efficiency9/article/details/72630347.father{ width: 200px; height: 200px; background-color: red; margin:0 auto; ...转载 2018-11-02 15:21:50 · 1705 阅读 · 0 评论 -
JS"类"中方法的互相调用
JS"类"中的方法相互调用要加"this"，不然无法成功： New Document function A() { this.f = function() { alert("f"); } this.f2 = function() { //f(); 不加this调用失败 this.原创 2016-03-02 14:23:09 · 5552 阅读 · 0 评论 -
jquery显示或隐藏元素
不要用.css("display","none")、.css("display","")进行隐藏或显示。它们大多数情况下能达到效果，但有时就无效了。使用jquery的show或hide方法。原创 2013-10-09 18:22:07 · 728 阅读 · 0 评论 -
web前端关于html转义符的常用js函数
出自：点击打开链接//去掉html标签function removeHtmlTab(tab) { return tab.replace(/]+?>/g,'');//删除所有HTML标签}//普通字符转换成转意符function html2Escape(sHtml) { return sHtml.replace(/[':'>','&':'&','"':'转载 2013-09-23 19:15:07 · 9972 阅读 · 1 评论 -
xheditor工具栏高度问题
从xheditor官网示例看，它的工具栏高度约25像素。但我下载应用到网页中后，工具栏高度达到30像素，不美观。经查，是由于td在未指定font-size情况下，其最小高度受字体大小限制。由于默认字体大小是14px，故工具栏高度不低于30px----你指定高度、溢出都没用。办法就是修改xheditor的ui.css，给td.xheTool添加一条属性：font-size:4px;--指定一原创 2013-06-24 15:47:54 · 1767 阅读 · 0 评论 -
jquery的一些问题
版本：jquery1.6.21 用jquery向select添加项在ie8和ie9下存在问题添加方法：var op = $(""+text+"");sel.append(op);用该方法开始是可以成功添加的，不过在某些情况下就会出问题，比如你同时用jquery绑定了chang事件，或者你在代码中动态添加项，你会发现select控件不正常了，下拉框打不开。总之用原始j原创 2013-01-16 12:10:33 · 524 阅读 · 0 评论 -
Div托拽移动
基于Jquery的Div托拽移动方法。在IE6、IE8、Chrome、FireFox、Opera下测试通过。兼容性主要取决于代码中的两组变量：X,Y和offx,offy。谁有更佳的赋值方法，请指出来。Div托拽移动-优快云-win32fan /*div托移动位置 dragDiv jquery对象,实施托拽的div moveDiv jquery对象,被托拽的的div原创 2012-09-12 09:46:32 · 1295 阅读 · 0 评论 -
慎用eval函数
eval函数实现了js中的运行时多态，看下面例子：function fn1(){ //...你要执行的代码 } function fn2(){ //...你要执行另一些代码 } var Ineed = "fn1"; eval(Ineed + '()'); //运行fn1(); Ineed = 'fn2'; eval(In原创 2012-09-01 17:04:18 · 780 阅读 · 0 评论 -
动态访问JSON成员
var d = {'name': 'pgd', 'value': '36'}for(i in d){ //i 就是键，d[i]就是值 alert(i+","+d[i]);}原创 2016-06-07 15:17:43 · 639 阅读 · 0 评论 -
学习笔记-CSS定位
父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..原创 2017-01-12 12:36:59 · 327 阅读 · 0 评论 -
整理下"分辨率"、"DPI"、px、pt...等概念
两篇参考文章：Windows上，调整dpi可使字体变大pt, px与dpi的关系自己的总结理解：1. "分辨率"（resolution）到底是指什么？分辨率有时被用来指最大像素数量，有时被用来指DPI。取决于用户更关心哪一项数据。2. DPI是数字显示设备（区别于模拟显示设备如CRT显示器）的重要性能参数。表示在一平方英寸内最多可以输出多少个像素点。3. 表示图形尺寸主要有...原创 2018-11-01 00:01:36 · 1734 阅读 · 0 评论 -
从网上下载的web源码在Windows下出现跨域问题
从百度下载了UEditor源码，发现一个现像：我把demo中的index.html用文本工具打开另存到同路径下换个名字比如index2.html，那么这个index2.html就会出现运行错误，而原来的index.html则运行正常。查看错误信息是iframe跨域访问被拒绝。那么index2中的iframe怎么就跨域了呢？原来是网上下载的web源文件，都会被Windows标为“此文件来自其他计算机...原创 2018-10-17 15:59:01 · 234 阅读 · 0 评论 -
两种单线边框table
两种实现table单线边框的代码：<!doctype html><HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><TITLE>两种单线边框table</TITLE> &am原创 2018-09-29 12:27:47 · 378 阅读 · 0 评论 -
ckeditor工具栏按钮显示不完整
配置为full模式，但还是有好多按钮没显示出来。最后才发现是因为下载的ckeditor是"标准版"，本身就只包含有限数量插件。下载了“完整版”后，就全部能显示出来了。泥妹啊，完整版也不过比标准版多了1M多而已，像字体颜色、背景色这些基本功能标准版里都没有，至于这样划分吗？老外怎么想的？...原创 2018-09-17 12:42:10 · 2053 阅读 · 3 评论 -
$('body').jqprint()会导致打印对话框无法取消
引用：jquery.jqprint-0.3.js想打印整个页面，于是代码中使用了$('body').jqprint()。结果发现在chrome下打印对话框无法取消，关闭了它又自动弹出来。解决方法是使用一个div包住整体内容，然后$('#divid').jqprint()...原创 2018-05-01 17:12:46 · 1056 阅读 · 0 评论 -
JS正则表达式
写法区别（匹配数字，注意转义符）：var reg = new RegExp("^\\d+$"); var t =/^\d+$/;var reg2 = new RegExp(t);原创 2018-04-14 19:48:20 · 215 阅读 · 0 评论 -
JS文件中变量命名防止重复
今天遇到一个奇怪现像：一段JS脚本在IE中执行正常，在chrome中却执行失败。最后发现问题出在：var top=...;top在chrome中已经被定义了，就像document和window一样。所以我们在写js代码时，不可以再用top做变量名。为了避免变量名重复，给变量名加个独特的前缀或后缀比较保险。原创 2012-08-29 15:37:52 · 3341 阅读 · 0 评论