<script src="qrcode.js"></script>

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

 一 // 容易圆式
 二 new QRCode(document.getElementById('qrcode'), 'your content');
 三 // 设置参数圆式
 四 var qrcode = new QRCode('qrcode', {
 五   text: 'your content',
 六   width: 二五六,
 七   height: 二五六,
 八   colorDark : '#000000',
 九   colorLight : '#ffffff',
一0   correctLevel : QRCode.CorrectLevel.H
一一 });
一二 // 利用 
一三 APIqrcode.clear();
一四 qrcode.makeCode('new content');

  一 <script src="~/Content/QRCode/qrcode.min.js"></script>
  二 
  三 <div class="qrCode">
  四     <div class="configure">
  五         <div class="inputUrl">
  六             <span style="display:block;height:四0px;line-height:四0px;float:left;">输进天址：</span>
  七             <input type="text" id="text" value="http://www.百度.com" />
  八         </div>
  九         <div class="inputUrl">
 一0             <span style="display:block;height:四0px;line-height:四0px;float:left;">图片年夜小铃博网：</span>
 一一             <select class="qrSize">
 一二                 <option value="一00">一00 X 一00</option>
 一三                 <option value="一五0">一五0 X 一五0</option>
 一四                 <option value="二00">二00 X 二00</option>
 一五                 <option value="三00">三00 X 三00</option>
 一六             </select>
 一七         </div>
 一八         <div class="inputUrl">
 一九             <span style="display:block;height:四0px;line-height:四0px;float:left;">后台颜色：</span>
 二0             <input type="text" readonly value="#ffffff" id="qrBGC" />
 二一             <div id="test二" style="height:四0px;line-height:四0px;width:四0px;"></div>
 二二         </div>
 二三         <div class="inputUrl">
 二四             <span style="display:block;height:四0px;line-height:四0px;float:left;">远景颜色：</span>
 二五             <input type="text" readonly value="#000000" id="qrFGC" />
 二六             <div id="test三" style="height:四0px;line-height:四0px;width:四0px;"></div>
 二七         </div>
 二八         <div class="inputUrl">
 二九             <a class="layui-btn createQRBtn">天生2维码</a>
 三0         </div>
 三一         <div class="inputUrl">
 三二             <a class="layui-btn downloadQRBtn">高载图片</a>
 三三         </div>
 三四     </div>
 三五     <div id="qrcode">那里将天生2维码图片！</div>
 三六     <div style="clear:both;"></div>
 三七 </div>
 三八 <style type="text/css">
 三九     .qrCode {
 四0         width: 一00%;
 四一         height: auto;
 四二         min-height: 五00px;
 四三         margin-left: auto;
 四四         margin-right: auto;
 四五         margin-top: 二0px;
 四六         box-shadow: blue 0px 0px 一0px 0px;
 四七         padding: 三0px;
 四八         border-radius: 八px;
 四九         white;
 五0     }
 五一 
 五二     .configure {
 五三         max-width: 四00px;
 五四         width: auto;
 五五         height: auto;
 五六         min-height: 三00px;
 五七         float: left;
 五八         display: inline-block;
 五九     }
 六0 
 六一     .inputUrl {
 六二         float: left;
 六三         height: 四0px;
 六四         margin-bottom: 一五px;
 六五         display: inline-block;
 六六         width: 一00%;
 六七     }
 六八 
 六九         .inputUrl a {
 七0             text-decoration: none;
 七一         }
 七二 
 七三     #text {
 七四         height: 四0px;
 七五         line-height: 三0px;
 七六         border-radius: 三px;
 七七         padding: 三px;
 七八         width: auto;
 七九         right: 一0px;
 八0         max-width: 四00px;
 八一         min-width: 二00px;
 八二         resize: none;
 八三         padding-left: 一0px;
 八四         border: 一px solid black;
 八五     }
 八六 
 八七         #text:hover {
 八八             border: 一px solid blue;
 八九             box-shadow: red 0px 0px 一0px 0px;
 九0         }
 九一 
 九二     .qrSize {
 九三         height: 四0px;
 九四         line-height: 三0px;
 九五         border-radius: 三px;
 九六         padding-left: 一0px;
 九七         padding: 三px;
 九八         max-width: 二八0px;
 九九         width: auto;
一00         border:一px solid #aaa七a七;
一0一     }
一0二 
一0三     #qrcode {
一0四         width: auto;
一0五         height: auto;
一0六         float: left;
一0七         padding: 一0px;
一0八         border: 一px solid #00ff九0;
一0九         border-radius: 五px;
一一0         display: inline-block;
一一一         margin-left: 一0px;
一一二         min-height:五0px;
一一三         min-width:五0px;
一一四     }
一一五 
一一六     #test二 div {
一一七         width: 四0px;
一一八         height: 四0px;
一一九     }
一二0     #test三 div {
一二一         width: 四0px;
一二二         height: 四0px;
一二三     }
一二四 
一二五     #qrBGC {
一二六         display: inline-block;
一二七         width: 一三0px;
一二八         height: 三六px;
一二九         line-height: 四0px;
一三0         border-radius: 三px;
一三一         border: 一px solid #八0八0八0;
一三二         padding-left: 一0px;
一三三     }
一三四     #qrFGC {
一三五         display: inline-block;
一三六         width: 一三0px;
一三七         height: 三六px;
一三八         line-height: 四0px;
一三九         border-radius: 三px;
一四0         border: 一px solid #八0八0八0;
一四一         padding-left: 一0px;
一四二     }
一四三 
一四四     .createQRBtn {
一四五         /*max-width: 三五0px;*/
一四六         width: 六0%;
一四七         margin-left: 二0%;
一四八         height: 四0px;
一四九         line-height: 四0px;
一五0         text-decoration: none;
一五一     }
一五二 
一五三     .downloadQRBtn {
一五四         width: 六0%;
一五五         margin-left: 二0%;
一五六         height: 四0px;
一五七         line-height: 四0px;
一五八         text-decoration: none;
一五九     }
一六0 </style>
一六一 <script type="text/javascript">
一六二     //始初化2维码
一六三     var qrcode = new QRCode(document.getElementById("qrcode"), {
一六四         width: 二00,
一六五         height: 二00
一六六     });
一六七     //天生2维码
一六八     function makeCode() {
一六九         var elText = document.getElementById("text");
一七0         if (!elText.value) {
一七一             alert("请输进要天生2维码的联接！");
一七二             elText.focus();
一七三             return;
一七四         }
一七五         $("#qrcode").empty();
一七六         qrcode = new QRCode(document.getElementById("qrcode"), {
一七七             width: $(".qrSize").val(),
一七八             height: $(".qrSize").val(),
一七九             colorLight: $("#qrBGC").val(),
一八0             colorDark: $("#qrFGC").val()
一八一         });
一八二         qrcode.makeCode(elText.value);
一八三     }
一八四 
一八五     //高载2维码
一八六     function downloadIamge() {
一八七         var imgs = document.getElementById("qrcode").getElementsByTagName("img")
一八八         var a = document.createElement('a')
一八九         a.download = 'xds' + new Date().getTime() || '高载图片称号'
一九0         a.href = imgs[0].src
一九一         document.body.appendChild(a);
一九二         a.click();
一九三         document.body.removeChild(a);
一九四     }
一九五     $(document).ready(function () {
一九六         makeCode();
一九七 
一九八         $("#text").on("keydown", function (e) {
一九九             if (e.keyCode == 一三) {
二00                 makeCode();
二0一             }
二0二         });
二0三         //面击天生2维码
二0四         $(".createQRBtn").click(function () {
二0五             makeCode();
二0六         });
二0七         //面击高载2维码
二0八         $(".downloadQRBtn").click(function () {
二0九             if ($("#qrcode:has(img)").length == 0) {
二一0                 alert("请师长教师成2维码再面击高载！");
二一一             }
二一二             else {
二一三                 downloadIamge(); 
二一四             }
二一五         });
二一六 
二一七         $(".inputUrl").each(function () {
二一八             $(this).children("input").css({ "width": ($(this).width() - 一二0) + "px" });
二一九             $(this).children("select").css({ "width": ($(this).width() - 一二0) + "px" });
二二0         });
二二一 
二二二         var windowsWidth = $(window).width();
二二三         if (windowsWidth > 一六八) {
二二四             $(".qrSize").append('<option value="四00">四00 X 四00</option>');
二二五             $(".qrSize").append('<option value="五00">五00 X 五00</option>');
二二六         }
二二七     });
二二八 </script>
二二九 <script src="~/Content/layui/lay/modules/form.js"></script>
二三0 <script type="text/javascript">
二三一     layui.use('colorpicker', function () {
二三二         var colorpicker = layui.colorpicker;
二三三         //始初色值
二三四         colorpicker.render({
二三五             elem: '#test二'
二三六             , color: '#ffffff' //设置默许色
二三七             , done: function (color) {
二三八                 $("#qrBGC").val(color);
二三九             }
二四0         }); 
二四一         colorpicker.render({
二四二             elem: '#test三'
二四三             , color: '#000000' //设置默许色
二四四             , done: function (color) {
二四五                 $("#qrFGC").val(color);
二四六             }
二四七         }); 
二四八     });
二四九 </script>

 一 layui.use('colorpicker', function () {
 二         var colorpicker = layui.colorpicker;
 三         //后台色始初色值
 四         colorpicker.render({
 五             elem: '#test二'
 六             , color: '#ffffff' //设置后台默许色
 七             , done: function (color) {//面击肯定以后的回调
 八                 $("#qrBGC").val(color);//给后台颜色文原框赋值
 九             }
一0         }); 
一一         //远景色始初色值
一二         colorpicker.render({
一三             elem: '#test三'
一四             , color: '#000000' //设置远景默许色
一五             , done: function (color) {
一六                 $("#qrFGC").val(color);//给远景颜色文原框赋值
一七             }
一八         }); 
一九     });
二0     //那边是两个文原框的代码以及体例
二一      <div class="inputUrl">
二二             <span style="display:block;height:四0px;line-height:四0px;float:left;">后台颜色：</span>
二三             <input type="text" readonly value="#ffffff" id="qrBGC" />
二四             <div id="test二" style="height:四0px;line-height:四0px;width:四0px;"></div>
二五         </div>
二六         <div class="inputUrl">
二七             <span style="display:block;height:四0px;line-height:四0px;float:left;">远景颜色：</span>
二八             <input type="text" readonly value="#000000" id="qrFGC" />
二九             <div id="test三" style="height:四0px;line-height:四0px;width:四0px;"></div>
三0         </div>

 一 //高载2维码
 二     function downloadIamge() {
 三         var imgs = document.getElementById("qrcode").getElementsByTagName("img")
 四         var a = document.createElement('a')
 五         a.download = 'xds' + new Date().getTime() || '高载图片称号'
 六         a.href = imgs[0].src
 七         document.body.appendChild(a);
 八         a.click();
 九         document.body.removeChild(a);
一0     }