js
文章平均质量分 51
tangchangcai.
做一名正直勇敢的青年
展开
-
form表单input实时监听内容变化
jQuery3.0 写法:$('#input').on('input propertychange', function(e) { e.stopPropagation(); // $('#content').html($(this).val().length + ' characters'); $("#hint_li").addClass("ac...原创 2019-03-06 08:49:46 · 5055 阅读 · 0 评论 -
H5 canvas参考手册
HTML 5 Canvas 参考手册reference: http://www.w3school.com.cn/tags/html_ref_canvas.asp原创 2018-05-11 17:57:13 · 870 阅读 · 0 评论 -
时刻要注意引用类型{},[],将它们赋值是赋指针,而不是赋副本。
应用场景,主要是引用类型{} and []:var aa = {arr:[1,2],name:"tcc"};var bb = aa;var cc = aa;bb.arr = [8,9];$("#mya").click(function(){ console.log('cc',cc); console.log('bb',bb); console.log('aa',aa);})...原创 2018-05-05 12:38:25 · 208 阅读 · 0 评论 -
上传视频
<input type="file" />先来了解一下: HTML DOM FileUpload 对象在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。该元素的 value 属性保存了用户指定的文件...原创 2018-05-10 17:38:10 · 638 阅读 · 0 评论 -
看layer.js
Point 1:window.getComputedStyle(node, null)reference: https://www.cnblogs.com/yuan-shuai/p/4125511.html原创 2018-04-20 11:14:22 · 306 阅读 · 0 评论 -
javascript中写插件用use strict的好处
function(){ "use strict"; //....往下的代码都会开启js strict 模式}use js strict mode 的好处:point1-检查json中重复的键: e.g : { a:1,a:1 //会报错了 }point2-检查函数中重复的参数: ...原创 2018-04-19 10:58:21 · 619 阅读 · 0 评论 -
javascript 中的 !~+-()符号的作用
section1:自运行函数 只有在运行到当前的代码时,才会解析里面的function()并自动执行,即,不会作变量提升,而是作为表达式定义。 e.g : (function aa(){}()) // (function aa(){})()//!与 () 和 ~ + - 作用类似。 var fn = function(){}...原创 2018-04-19 10:24:18 · 1822 阅读 · 0 评论 -
最简单的recursion示例
//最简单的递归算法的应用log = console.log;var persons = [ { "authority_code": "sys_cfg", "children": [ { "authority_code": "region_manager", "createTime": 1507682635000, &quo原创 2018-04-19 09:40:48 · 220 阅读 · 0 评论 -
JS Object() 与 new Object()的区别
//无意间看到这段代码function inheritPrototype(subType,superType){ var prototype = Object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype;}// 以上是原型继承的优化方法// 看到这个O...原创 2018-04-06 23:12:06 · 28630 阅读 · 0 评论 -
理解JS构造函数,其原型对象和其实例对象的关系
At first ,please look at this demo:function Fn(){this.age = 18;}var fn1 = new Fn();在这里简单说一下new操作符调用Fn()的实例过程:(new操作符的作用就是让每个new后面的函数调用时其this都指向该函数 名)1.自动创建一个新对象设为obj。2.obj会调用Fn, like: Fn.apply(obj,ar...原创 2018-04-06 12:42:55 · 424 阅读 · 0 评论 -
关于在new Object()后,使用Object.defineProperty()修改了这个对象之后,有什么影响?
I'm so sorry.这篇文章竟然是我的疑问篇,这是今天在使用Object.defineProperty()方法的时候遇到的问题。At first Object.defineProperty是为了解决我们在js中不能直接访问ECMA-262定义的数据属性和访问器属性,因为这些属性是为了实现JavaScript引擎用的。Qusetion one:like the following:brief ...原创 2018-04-05 12:08:54 · 313 阅读 · 0 评论 -
html 5 history api 教你一些兼容ie10+的修改history记录的技能
reference:https://www.cnblogs.com/chaoyuehedy/p/5758143.html转载 2018-04-03 22:49:02 · 624 阅读 · 1 评论 -
js 中事件的event的注意事项,如何在普通函数中取到event事件对象呢?
Point1 应用场景不同时应当注意什么? onlick = function(e){ e可以直接取到event对象。即window.event; } function another(e){ var eventO = e || window.event; // e 90%都是undefined }Point2 IE9...原创 2018-05-13 11:32:49 · 2342 阅读 · 0 评论 -
sessionStorage 的使用
study window.sessionStorage object:Point1--如何存的是对象要先用JSON原生对象将其转换一下才存,取出来后要用JSON.parse(对象)将其恢复为原来的object才能取值。log = console.log;var session = window.sessionStorage;session.setItem("akey",JSON.string...原创 2018-05-19 18:12:52 · 451 阅读 · 0 评论 -
随机数产生最大值或最小值的方法,用Math.random(),Math.floor来实现
1.问题:总是看见有些同学写的随机数没有最大值或最小值,如:var result = Math.floor(Math.random()*100) + 1 ;// 说好的0-100,结果0是万年出不来2.解决办法:function generationRangerandom(minNumber,maxNumber){// 避免没有最小值或最大值 var randomResult...原创 2018-11-28 17:31:50 · 4854 阅读 · 2 评论 -
a标签实现下载文件或称导出文件
简单的下载示例:<a href="url"></a><img src="url" />文件下载原理: java后台只能做到返回二进制流或文件给前端,最终在前端页面创建一个a,然后触发a的点击事件实现点击下载效果。接口:export function exportfile_goods(jsonobj){ // 导出商品文件 ...原创 2018-11-02 12:00:56 · 15502 阅读 · 1 评论 -
火狐firefox web技术文档
https://developer.mozilla.org/zh-CN/search?q=url%E5%AF%B9%E8%B1%A1&topic=api&topic=css&topic=canvas&topic=html&topic=http&topic=js&topic=svg&topic=standards&topic=w...原创 2018-11-02 16:27:36 · 891 阅读 · 0 评论 -
a标签默认是get请求,可以用js转为post请求
比如,我们在做删除的时候,是在一个a标签上面,但是我们要转为POST方法进行提交;第一:我们在页面中添加一个form表单; 第二步:通过 js 转换,在这个过程中,我们可以先将传递的值,赋到隐藏域上。转自:https://blog.csdn.net/m0_37392489/article/details/77683905...转载 2018-11-02 10:19:12 · 7913 阅读 · 0 评论 -
H5的drag使用说明和vue2.0拖拽排序示例
html5 drag api详解 (引用原文https://www.cnblogs.com/wuya16/p/DragApi.html) 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 diffX ,diffY 2.在mousedown中绑定 document的mous...原创 2018-10-31 17:44:14 · 3657 阅读 · 0 评论 -
js 实现倒计时,以及new Date().getTime()的格式化应用兼容性说明
最终效果:用%(mod)等方法计算得出9月10号距离国庆开业的倒计时html:核心代码<div class="countdown-block"> <!-- 数字的背景 --> <img class="countdown-block-bg" src="../img/activity/countDown/displayBlock.png" hei...原创 2018-09-11 10:46:37 · 2987 阅读 · 0 评论 -
原生JS中 cssText的用法,可以给样式加!important权重
就像在html中写style=“”一样一次写一堆,但是给cssText设置后原先的css样式被清掉了,只有最新设置的值;document.getElementById("id").style.cssText = "font-size:100px!important;width:100px;"如果要不影响原先设置的css,可以这样写document.getElementById("id"...原创 2018-09-08 23:01:19 · 6105 阅读 · 1 评论 -
检测浏览器版本
先取得值:// 仿真 simulation 取得navgator.userAgent的值var simulationIE8 = "Mozilla/4.0(compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)";var simulationIE9 = "Mozilla/5.0(compatible; MSIE 9.0; Windows N...原创 2018-09-08 09:38:31 · 846 阅读 · 0 评论 -
if( a = 0)的用法,仅相当于if(Boolean(0)){ a = 0},这种写法是不推荐的
1.简单示例:var a ;if(a = 0) esle {} 实际相当于 :if(Boolean(0)){ a = 0; //do sth}else{ a = 0 //do sth}2.总结:原创 2018-07-09 10:58:59 · 2217 阅读 · 0 评论 -
js forEach(function(){ //跳出循环的})
try{ var array = ["first","second","third","fourth"]; array.forEach(function(item,index){ if(item == "third"){ var a = aaaa;// first second 后就报错...原创 2018-06-01 10:28:45 · 5960 阅读 · 0 评论 -
前端cookie使用
工作原理:原创 2018-05-16 09:42:40 · 1005 阅读 · 0 评论 -
crlf 与cr 说明和注入攻击、防御
reference:https://blog.csdn.net/hl_java/article/details/71134626不同的操作系统回车换行符定义是不一样的,如果你跟我一样记不住,crlf几个字段的含义的话,记录下来就非常有必要了win \r\n CRLF ASCII 13 carriage return/line feedlinux/unix \n CR AS...转载 2018-04-03 15:01:17 · 1249 阅读 · 0 评论 -
jQuery中三个获取位置方法offset、position、scrollTop/scrollLeft的区别和用法
首先要搞清楚元素没有定位时的默认状态:Position:static 都是以document body为相对基准(也就是以body为基准)1.offset$().offset().top;$().offset().left;元素到document顶部的top or left2.position$().position().top;$().position().left;如果没有在其父元素中定义po...原创 2018-04-02 16:23:30 · 1330 阅读 · 1 评论 -
mock.js前后端分离数据模拟
当后台人员没有写好api时,可以先使用mock.js来模拟数据。1.please:https://github.com/nuysoft/Mock/wiki已经有6900+ star2.在vue中使用mock.jsreference: https://segmentfault.com/a/1190000010592626...原创 2018-04-02 14:55:36 · 712 阅读 · 0 评论 -
前端websockt可重连功能的插件
详情参考:https://www.cnblogs.com/HendSame-JMZ/p/6383443.html下载两个包后,直接引入html:https://github.com/tangcc8/reconnecting-websockethttps://github.com/tangcc8/offline效果:最终的效果是:当网络断开连接后,会先重连3000次,如果转载 2018-01-13 10:54:46 · 1468 阅读 · 0 评论 -
html5 websoket 的使用方法
参考:https://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html认识HTML5的WebSocket在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简转载 2018-01-12 16:11:17 · 1284 阅读 · 0 评论 -
谈谈document.ready和window.onload的区别
参考:https://www.cnblogs.com/a546558309/p/3478344.html在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。而转载 2018-01-04 09:38:18 · 258 阅读 · 0 评论 -
获取当前浏览器视口的兼容方法
参考:http://w3school.com.cn/js/js_window.aspWindow 尺寸有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。对于Internet Explorer9、Chrome、Firefox、Opera 以及 Safari:window.innerHeight - 浏览器窗口的内部高度win原创 2018-01-04 09:11:19 · 833 阅读 · 0 评论 -
html5 websocket的原理,只能在支持的设备上使用
参考:http://blog.csdn.net/frank_good/article/details/50856585偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里,分享一下。比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享。废话这么多了,最后再赞一个~一、webs转载 2018-01-12 15:59:32 · 1257 阅读 · 0 评论 -
IE8兼容性解决forEach()、addEvntListener
原生js的DOM操作:http://www.w3school.com.cn/htmldom/dom_methods.asp具体操作:http://www.w3school.com.cn/jsref/dom_obj_all.asp1.javascript 如何解决IE8不支持forEach()转载自:点击打开链接forEach 是在第五版本里被添加到 ECMA-262 标准的;这样它...转载 2017-12-05 12:07:24 · 460 阅读 · 0 评论 -
web前端cookie的使用方法
补充参考网站有祥细说明:https://segmentfault.com/a/1190000004743454我自己封装的document.cookie(不是window.cookie)存取删除使用方法:var component = { // addCookie : function(name,value,expiresMinis){ var cook原创 2017-12-25 12:02:52 · 6224 阅读 · 0 评论 -
js数组去重的方法
最简单的方法一:var arr = [1,2,3,1];//原数组var arr2 = [];//新数组for(var i=0;ilength;i++){ //(indexOf本意是找到数组中某个项在数组的索引,如果找不到就会返回-1) if(arr2.indexOf(arr[i]) == -1){//原理:检测如果原数组的每一项在新数组找不到才会添加到新数组就达到了去重的效果原创 2017-12-26 10:04:08 · 161 阅读 · 1 评论 -
如何将word一段字符串转为html表格再转为excel格式
原理:先将从word复制出来的字符串转成html页面的表格,然后将页面的表格直接粘贴到excel中,就可以得到表格了,easy job ^_^PS:我用的是wps excel, ms excel我没有试。/********************************************** 代码如下 ****************************原创 2017-12-24 20:59:52 · 525 阅读 · 0 评论 -
实践原生的html5 websoket
实例代码:// 创建一个Socket实例var wsUri ="ws://192.168.1.107/webSocket/9999";var websocket;var interval;//心跳是给后台判断是否还要前端发送数据function initWebSocket() { websocket = new WebSocket(wsUri); //只是打开连接原创 2018-01-13 11:33:53 · 290 阅读 · 0 评论 -
在移动端html页面上拨打电话,发短信的方法
1.打电话://已测试这种方式塞班、安卓(不可以存号码)与iphone都支持拨打电话以下还有几种方法没有测试的: 拨打电话在铃看到的一种方式 拨打电话接下来看发送短信的方法短信下单以下为:2013年11月29号更新因微信屏蔽一键拨号功能,所以需要在要拨号的页面的URL后面增加 “#mp.weixin.qq.com”,如在原创 2017-12-29 14:36:45 · 7291 阅读 · 0 评论 -
JS面向对象的应用场景
reference:http://www.cnblogs.com/chiangchou/p/js-oop3.html原创 2018-04-08 22:40:36 · 2233 阅读 · 0 评论