js demo - 随笔分类 - dtdxrk

上拉加载下拉刷新

摘要：作者：信心 https://juejin.im/post/5b9091e7e51d450e70423161 我们依旧从界面及逻辑两块进行分析 1.界面上，只分成简单的两块，一块是上方的刷新文字，一块是下方的内容，然后将上方提示内容隐藏在屏幕之外，一般由两种方式，一种是上面遮一层，另一种是margin 阅读全文

posted @ 2018-11-02 11:53 dtdxrk 阅读(898) 评论(0) 推荐(0) 编辑

js一道面试题

摘要：题目是这样的，按照以下函数的结果写一个sub()方法：sub(1)(2)(3);/*return 6*/sub(4)(3)(3);/*return 10*/我的山寨做法： function sub(n){ return function(j){ return function(i){ c... 阅读全文

posted @ 2015-08-05 00:11 dtdxrk 阅读(266) 评论(0) 推荐(0) 编辑

【canvas】blackboard 黑板

摘要：本来想的挺复杂实际操作了一下15分钟完成了，挺简单的。预览地址：http://dtdxrk.github.io/game/blackboard/index.html分享一下思路：1.创建画布2.添加按钮3.设置事件没啥好说的就这样吧。 blackboard chalkColor : whitepi... 阅读全文

posted @ 2015-04-20 22:59 dtdxrk 阅读(608) 评论(0) 推荐(0) 编辑

【canvas】高级功能一变形

摘要：【canvas】Demo1scale缩放图片【canvas】Demo2 translate移动图片【canvas】Demo3 rotate旋转 rotate 阅读全文

posted @ 2015-04-20 18:17 dtdxrk 阅读(579) 评论(0) 推荐(0) 编辑

【canvas】基础练习三图片

摘要：【canvas】Demo1 drawImagedrawImage(img,x,y); 图片　【canvas】Demo2 drawImagedrawImage(img,x,y)drawImage(img,x,y,w,h)drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) ... 阅读全文

posted @ 2015-04-20 16:32 dtdxrk 阅读(420) 评论(0) 推荐(0) 编辑

【canvas】基础练习二文字

摘要：demo1 fillText strokeText绘制文字 fillText strokeText demo2字体大小粗细字体大小粗细 demo3 文字对齐 textAlign textBaseline感觉没啥好说的http://www.w3school.com.cn/tags/... 阅读全文

posted @ 2015-04-20 15:27 dtdxrk 阅读(241) 评论(0) 推荐(0) 编辑

【canvas】基础练习一图形

摘要：Demo1【绘制一条线】 demo 1 Demo2【改变线帽样式】 lineCap demo3【绘制矩形】 strokeRect demo4【圆形】 arc demo5【圆角矩形】 arcTo demo6【擦除】 clearRect demo7【二次贝尔曲线quadratic... 阅读全文

posted @ 2015-04-20 10:50 dtdxrk 阅读(402) 评论(0) 推荐(0) 编辑

Js动态获取iframe子页面的高度总结

摘要：问题的缘由产品有个评论列表引用的是个iframe，高度不固定于是引发这个总结。方法1：父级页面获取子级页面的高度给元素设置高度这方法是用在父级页面里的，通过获取子级页面的高度给iframe设置高度涉及了一些兼容问题:IE用attachEvent | 3C用onload来判断子页面是否加载完成。IE... 阅读全文

posted @ 2014-06-19 16:47 dtdxrk 阅读(56613) 评论(2) 推荐(3) 编辑

最短JS判断IE6/IE7/IE8系列的写法

摘要：常用的var isIE=!!window.ActiveXObject;var isIE6=isIE&&!window.XMLHttpRequest;var isIE8=isIE&&!!document.documentMode;var isIE7=isIE&&!isIE6&&!isIE8;最短的IE... 阅读全文

posted @ 2014-04-21 16:01 dtdxrk 阅读(374) 评论(0) 推荐(0) 编辑

mouseover和mouseout事件引发的BUG-解决方法

摘要：mouseover和mouseout引发的BUG原由当给一个元素添加mouseover或mouseout事件，这个元素还有子元素。由于子元素的事件冒泡，鼠标移入或移出子元素都会触发事件。解决的方法：根据event对象判断是否为子元素JQuery解决方法JQuery可以用mouseenter代替mou... 阅读全文

posted @ 2014-04-09 15:38 dtdxrk 阅读(1690) 评论(0) 推荐(0) 编辑

Js判断当前浏览者的操作系统

摘要：function validataOS(){ var userAgent = navigator.userAgent; if(userAgent.indexOf('Window')>0){ return 'Windows'; }else if(userAgent.indexOf('Mac OS X')>0) { return 'Mac'; }else if(userAgent.indexOf('Linux')>0) { return 'Linux'; }else{ return & 阅读全文

posted @ 2014-03-31 10:55 dtdxrk 阅读(284) 评论(0) 推荐(0) 编辑

Js 动态插入css js文件

摘要：function loadjscssfile(filename,filetype){ var file, //动态插入的文件 doc = document; if(filetype == "js"){ file = doc.createElement('script'); file.setAttribute("type","text/javascript"); file.setAttribute("src",filename); }else if(filetype == "css" 阅读全文

posted @ 2014-03-31 10:40 dtdxrk 阅读(596) 评论(0) 推荐(0) 编辑

baiduMap试手《办理进京证和市区警察查询进京证的地址浏览》

摘要：没用过baidu的map api其实挺简单，申请一个key，然后根据坐标在地图上生成对象，看了官方的dome多少知道有些什么功能了，没什么可说的直接贴效果。 1 2 3 4 5 6 办理进京证和警察查询进京证的地址 7 31 32 33 34 1.北京办理进京证的地址 35 2.市区警察查询进京证地址 36 3.北京车管办事大厅 37 Auther:文刀日月 38 39 40 41 42 43 176 177 阅读全文

posted @ 2014-02-13 23:53 dtdxrk 阅读(2957) 评论(0) 推荐(0) 编辑

原生Js 两种方法实现页面关键字高亮显示

摘要：上网看了看别人写的，不是兼容问题就是代码繁琐，自己琢磨了一下用两种方法都可以实现，各有利弊。方法一依靠正则表达式修改1.获取obj的html2.统一替换html标签3.替换要修改的关键字4.再把html标签修改回去不足就是如果查找的关键字跟替换的标签一样就有冲突了效果预览：http://jsfiddle.net/dtdxrk/EAqkN/embedded/result/ 1 2 3 4 5 方法一依靠正则表达式修改 6 7 8 9 一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后，就派来了一名主持和一名书记，共同负责解决这一问题。主持... 阅读全文

posted @ 2014-01-07 12:22 dtdxrk 阅读(6003) 评论(1) 推荐(1) 编辑

原生Js封装的产品图片360度展示

摘要：挺简单的一段程序，但是效果不错：1.把需要展示的36张图片先预加载到浏览器缓存里2.给展示图片的div添加方法3.通过鼠标左右移动的像素转换图片在线效果预览：http://jsfiddle.net/dtdxrk/SnSGj/embedded/result/ 1 2 3 4 5 原生Js产品图片360度展示 6 13 14 15 16 鼠标左键点击图片-并左右移动 17 18 19 20 21 22 136 137 阅读全文

posted @ 2013-07-22 11:03 dtdxrk 阅读(772) 评论(0) 推荐(0) 编辑

原生Js汉语拼音首字母匹配城市名/自动提示列表

摘要：根据城市的汉语名称首字母把城市排序，基本思路：1.处理数据，按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQRSTU:{},VWXYZ:{}}2.解析数据创建数据div 给需要功能的input分别添加事件效果预览：http://jsfiddle.net/dtdxrk/xdftL/embedded/result/ 1 2 3 4 5 原生Js汉语拼音首字母匹配城市名 6 33 34 35 36 37 38 39 44 49 54 59 64 6... 阅读全文

posted @ 2013-07-13 16:56 dtdxrk 阅读(5227) 评论(0) 推荐(0) 编辑

原生Js基于HTML5 FileReader&canvas制作的banner广告图片插件

摘要：有了HTML5的FileReader&canvas这两个方法不需要走后台服务就可以编辑生成图片了，插件只能在支持HTML5的浏览器上使用！！简单制作过程和思路 1.创建画布2.上传图片预览到画布3.创建input参数控制样式4.输出图片=============================================用到了两个知识点1.html5 FileReader可以本地读取FILE文件2.html5 Canvas用来绘图toDataURL生成图片=============================================参考学习资料FileReader详解阅读全文

posted @ 2013-06-14 16:54 dtdxrk 阅读(1358) 评论(0) 推荐(0) 编辑

Js原生元素选择器 _$获取id class attr 属性集合

摘要：虽然跟jQuery的实现比起来是不堪入目的。但在平时一些小项目或效果的实现中，对于js获取页面元素的操作，感觉就够用了，而不用总是依赖框架去实现一些页面的交互效果。js截图浏览器控制台 1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Js自定义_$元素选择器</tit 阅读全文

posted @ 2013-05-20 17:05 dtdxrk 阅读(5484) 评论(2) 推荐(1) 编辑

原生JavaScript对CSS进行格式化和压缩

摘要：全是正则表达式测试地址:http://jsfiddle.net/dtdxrk/AX5wN/embedded/result/ 1 2 3 4 5 原生JavaScript对CSS进行格式化和压缩 6 12 13 原生JavaScript对CSS进行格式化和压缩14 15 16 17 input,button{ 18 height:20px;background-color: #ffffff;/*border:1px solid #333333;*/ 19 } 20 21 22 65 66 67 阅读全文

posted @ 2013-01-16 15:22 dtdxrk 阅读(342) 评论(0) 推荐(0) 编辑

Js 页面元素简单震动效果

摘要：效果预览:http://jsfiddle.net/dtdxrk/P9gea/embedded/result/看见类似的效果自己动手写一个就是padding +setTimeout让元素动起来其实margin也行调用的时候要注意元素的原始padding设置 1 2 3 4 5 Js 页面元素简单震动效果 6 10 11 12 13 点我试试14 15 39 40 阅读全文

posted @ 2012-12-19 14:03 dtdxrk 阅读(1584) 评论(1) 推荐(0) 编辑

随笔分类 - js demo