首页>>Jquery文字>>jQuery输入域名网址生成二维码(2019-05-05)

jQuery输入域名网址生成二维码

jQuery输入域名网址生成二维码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form action="" class="form-horizontal panel-body" id="form1" method="post">  
  2.             <ul class="nav nav-tabs nav-tabs-sm" role="tablist" id="mytabs">  
  3.                 <li role="presentation" class="active">  
  4.                     <a href="" role="tab" data-toggle="tab" id="tab1" aria-controls="pane1"><strong>QRCode Generator</strong></a>  
  5.                 </li>  
  6.             </ul>  
  7.             <div class="tab-content" style="padding-top: 15px;">  
  8.                 <div role="tabpanel" class="tab-pane fade in active" id="pane1" aria-labelledby="tab1">  
  9.                     <div class="form-group form-group-sm">  
  10.                         <label class="control-label col-md-2">二维码内容</label>  
  11.                         <div class="col-md-10">  
  12.                             <textarea name="txtContent" id="txtContent" rows="2" class="form-control input-normal" placeholder="">http://www.freejs.net/</textarea>  
  13.                         </div>  
  14.                     </div>  
  15.   
  16.                     <div class="form-group form-group-sm">  
  17.                         <label class="control-label col-md-2">二维码图像</label>  
  18.                         <div class="col-md-10">  
  19.                             <div id="qrcode"></div>  
  20.                             <p class="m-top-10 text-muted">使用手机扫一扫</p>  
  21.                         </div>  
  22.                     </div>  
  23.                       
  24.                     <div class="form-group form-group-sm">  
  25.                         <div class="col-md-10 col-md-offset-2">  
  26.                             <p class="form-control-static text-danger" id="tips"></p>  
  27.                         </div>  
  28.                     </div>  
  29.                 </div>  
  30.             </div>  
  31.             <hr class="sm">  
  32.             <div class="btn-footer">  
  33.                 <button name="btnCreate" class="btn btn-success" type="button" onClick="f_onCreateQrcode();" title="将根据您填写的内容生成二维码图像">开始生成</button>  
  34.                 <button name="btnClear" class="btn btn-default" type="button" onClick="f_onClearQrcode();" title="清除">清除</button>  
  35.             </div>  
  36.         </form>      

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     //二维码内容  
  3.     var txtContent = document.getElementById("txtContent"), tips = $("#tips");  
  4.   
  5.     // 设置 qrcode 参数  
  6.     var qrcode = new QRCode('qrcode', {  
  7.         text: 'www.freejs.net',  
  8.         width: 256,  
  9.         height: 256,  
  10.         colorDark: '#000000',  
  11.         colorLight: '#ffffff',  
  12.         correctLevel: QRCode.CorrectLevel.H  
  13.     });  
  14.   
  15.     //生成二维码图像  
  16.     function f_onCreateQrcode() {  
  17.         if (!txtContent) {  
  18.             return false;  
  19.         } else {  
  20.             if (!txtContent.value) {  
  21.                  tips.html("！请填写<strong>二维码内容</strong>再提交生成");  
  22.             } else {  
  23.                 // 使用 API  
  24.                 qrcode.clear();  
  25.                 tips.empty();  
  26.                 qrcode.makeCode(txtContent.value);  
  27.             }  
  28.             return false;  
  29.         }  
  30.     }  
  31.   
  32.     //清除二维码内容  
  33.     function f_onClearQrcode() {  
  34.         if (txtContent) {  
  35.             txtContent.value = "www.freejs.net";  
  36.             // 使用 API  
  37.             qrcode.clear();  
  38.             qrcode.makeCode('请输入二维码内容再生成图像');  
  39.         }  
  40.     }  
  41. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_762.html