使用JavaScript生成二维码教程-附qrcodejs中文文档

使用javascript生成二维码 依赖jquery

需要使用到的库


https://github.com/davidshimjs/qrcodejs

DIV

<div id="qrcode"></div>

javascript

 var qrcode = new QRCode("qrcode");

  qrcode.makeCode("http://www.fengkaichang.com");

至此一个简单的二维码就生成了

image

接下来我们就详细了解一下这个库到底为我们提供了哪些参数配置和方法

配置

new  QRCode(element,option)
名称 默认值 类型 说明
element string 显示二维码的元素或该元素的 ID
option objec 参数配置
名称 默认值 类型 说明
text string 需要生成的二维码内容
width 256 number 图像宽度
height 256 number 图像高度
colorDark “#000000” string 前景色
colorLight “#ffffff” string 背景色
correctLevel QRCode.CorrectLevel.L 容错级别

容错级别有

QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

var qrcode = new QRCode(element), { text: "www,fengkaichang.com", width: 150, height: 150, colorDark : "#000000", colorLight : "#ffffff", typeNumber:4, correctLevel : QRCode.CorrectLevel.H });

API方法

qrcode.makeCode(text)   //设置二维码内容
qrcode.clear() //清除二维码。

相关信息 GitHub 中文文档

Cookie常用操作以及属性

概述

最近项目要用到cookie存储部分用户信息;研究了一下做一下分享

Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。

设置cookie存储


document.cookie = 'userName=fengkaicahng';
  • 注意 设置cookie一次只能存储一条
  • cookie可以多次设置 key相同不会重新赋值而是会新建一条cookie

读取cookie


var allCookies = document.cookie; //一次读取所有cookie 字符串形式 //所以一般我们还要做一次转换 var cookiesArray = document.cookie.split(';'); console.log(cookiesArray);

cookie的几个属性

  • value (必须)一个键值对,用来指定cookie的值

document.cookie = 'userName=fengkaicahng';
  • expires 指定Cookie过期时间;格式采用Date.toUTCString()

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //设置一天的有效期 //如果不设置; 默认时间是当前会话窗口关闭即失效 document.cookie = 'userName=fengkaicahng;expires="+day+"';
  • domain 指定发送Cookie的域名

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //只有在该域名下才发送cookie, //如果不设置; 默认是设置cookie时的域名 //以下配置会在fengkaichang.com 的所有子域名下生效 document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;
  • path 指定Cookie的路径

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //只有这个路径和发送到服务器的路径相同才发送cookie 可以直接配置/ 从根目录下匹配 这个匹配并不是绝对的, //如果不设置; 默认是请求该cookie时的路径 //以下配置会在fengkaichang.com 的所有请求路径下生效 //注意 path生效的前提是domain匹配成功,否则都是扯淡 document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/'
  • secure 指定Cookie只能在加密协议HTTPS下发送到服务器

var day = new Date(); day.setTime(day.getTime()+(1*24*60*60*1000)); //这个属性的值是一个布尔值 //如果这个通信协议是HTTPS那么协议自动打开 //如果手动设置 一下配置不会在普通HTTP协议下发送 document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/;secure=true'

以上内容参考自阮一峰博客的JavaScript教程http://javascript.ruanyifeng.com/bom/cookie.html

更多内容请关注 冯凯昌博客 www.fengkaichang

JQuery操作iframe父页面与子页面的元素与方法

JQuery操作iframe父页面与子页面的元素与方法

JQUERY IFRAME

下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。

第一、在iframe中查找父页面元素的方法:
$('#id', window.parent.document)
第二、在父页面中获取iframe中的元素方法:
$(this).contents().find("#suggestBox")
第三、在iframe中调用父页面中定义的方法和变量:
parent.method parent.value

jquery、js调用iframe父窗口与子窗口元素的方法

1. jquery 在iframe子页面获取父页面元素代码如下:
$("#objid", parent.document)
2. jquery在父页面 获取iframe子页面的元素 代码如下:
$("#objid",document.frames('iframename').document)
3.js 在iframe子页面获取父页面元素代码如下:
indow.parent.document.getElementByIdx_x("元素id");
4.js 在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].document.getElementByIdx_x("元素id");
5.子类iframe内调用父类函数:
window.parent.func();

更多内容关注我的个人博客 www.fengkaichang.com

JavaScript中的两个延迟加载JS文件的属性anyn和defer

   defer

    HTML 4.01 <script>标签定义了 defer 属性。

    这个属性的用途是表明脚本在执行时不会影响页面的构造。

    也就是说,脚本会被延迟到整个页面都解析完毕后再运行。

    因此,在<script>元素中设置defer 属性,相当于告诉浏览器立即下载,但延迟执行。


    HTML5 规范要求脚本按照它们出现的先后顺序执行,因此第一个加载脚本会先于第二个加载脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行。

    在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。
    前面提到过,
defer 属性只适用于外部脚本文件。这一点在 HTML5 中已经明确规定,因此支持HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。 IE4IE7 还支持对嵌入脚本的 defer 属性,但IE8 及之后版本则完全支持 HTML5 规定的行为。
    IE4Firefox 3.5Safari 5 Chrome 是最早支持 defer 属性的浏览器。其他浏览器会忽略这个属性,像平常一样处理脚本。为此,把延迟脚本放在页面底部仍然是最佳选择。

   async

    HTML5 <script>元素定义了 async 属性。这个属性与 defer 属性类似,都用于改变处理脚本的行为。

    同样与 defer 类似, async 只适用于外部脚本文件,并告诉浏览器立即下载文件。

    但与 defer不同的是,标记为 async 的脚本并不保证按照指定它们的先后顺序执行。

    第二个加载的脚本文件可能会在第一个加载的脚本文件之前执行。

    因此,确保两者之间互不依赖非常重要。

    指定 async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。
    为此,建议异步脚本不要在加载期间修改
DOM
    异步脚本一定会在页面的
load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。

    支持异步脚本的浏览器有 Firefox 3.6Safari 5 Chrome


    因此在最新的HTML5标准下defer这个属性是会被忽略掉的、是无效的、除非你还需要兼容IE8以前的浏览器、这对当前大多数网页来说这是没有意义的。

    所以更推荐使用async、当然这不是最好的方式、因为你无法控制它的加载顺序、如果你的JS文件存在依赖关系的话,那将是一个非常糟糕的事情、我更喜欢使用动态创建script标签的方式来做延迟加载,当然方式不止一种、希望你能找到自己喜欢的方式。如果还有什么不懂可以来联系我


    by潇潇暮雨