xem Demo
Các Bước Làm
B1: Style css cho đẹp tý
<style>
.fb_button2 {
background-color: #3b5998;
border-color: #d8dfea rgb(14, 31, 91) rgb(14, 31, 91) rgb(216, 223, 234);
border-style: solid;
border-width: 1px;
color: #fff;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 11px;
margin: 0 2px;
padding: 2px 18px;
}
#txt_qr { width:330px;margin-bottom:5px; }
#size { width:110px;}
#ecc { width:210px;}
#taoma {
margin-top:5px;
}
</style>
B2: Mã html
<div style="float:left;width:500px;text-align:center">
<b>Nội dung cần tạo mã QR (QRCode):</b><br>
<div style="float: left; width:500px;">
<textarea class="textarea" id="txt_qr" cols="36" name="txt_qr" >Gõ Text Tại Đây </textarea>
</div>
<div style="float: left; width:500px">
<select style="margin-right:10px;" id="ecc" name="ecc">
<option value="L">Có thể phục hồi nếu hỏng 7%</option>
<option selected="" value="M">Có thể phục hồi nếu hỏng 15%</option>
<option value="Q">Có thể phục hồi nếu hỏng 25%</option>
<option value="H">Có thể phục hồi nếu hỏng 30%</option>
</select>
<select style="margin-right: 0px;" id="size" name="size">
<option value="80x80">Size:80x80</option>
<option value="100x100">Size:100x100</option>
<option value="120x120">Size:120x120</option>
<option value="150x150">Size:150x150</option>
<option selected="" value="180x180">Size:180x180</option>
<option value="200x200">Size:200x200</option>
<option value="250x250">Size:250x250</option>
<option value="280x280">Size:280x280</option>
<option value="300x300">Size:300x300</option>
<option value="400x400">Size:400x400</option>
</select>
</div>
<div style="float:left ;width:500px;text-align:center;padding:5px;">
<input type="submit" id="taoma" onClick="taoQRcode();" class="fb_button2" value="Bắt Đầu Tạo Mã">
</div>
<div style="float:left ;width:500px;text-align:center;padding:5px;">
<div id="show"></div>
</div>
</div>
** đây là nơi ảnh qr code sẽ được hiển thị <div id="show"></div>
*** muốn tăng kích thước của ảnh qrcode 400x400 hay bao nhiêu tùy ý bạn thì chỉ cần thay đổi , thêm bớt giá trị
<option value="400x400">Size:400x400</option>
<script type="text/javascript">
function taoQRcode(){
var txt_qr=document.getElementById('txt_qr').value;
var ecc=document.getElementById('ecc').value;
var size=document.getElementById('size').value;
var show=document.getElementById('show');
var chl = new String(txt_qr);
pos = chl.indexOf('#',0);
if (pos >= 0) {
chl = chl.substr(0,pos);
}
chl = escape(chl); //
var chs = size;
var choe = 'UTF-8';
var chld = ecc;
var margin = 4;
var linkimage='http://chart.apis.google.com/chart?chs='+chs+'&cht=qr&chl='+chl+'&choe='+choe+'&chld='+chld+'|'+margin+'';
show.innerHTML= unescape('<img src="'+linkimage+'" alt="QR Code" />');
}
</script>
trên đây là toàn bộ script tạo qrcode đơn giản , tất cả code để nhét vào widget/html cho blogspot, cũng khá hay .
Qr code giống barcode( mã vạch ) nhưng có nhiều tác dụng hơn mã vạch -> http://shimivn.blogspot.com/2012/02/tim-hieu-ve-qr-code.html - đôi dòng về qr code
ReplyDelete