barcode.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var img = null;
  12. var blist = [];
  13. function scaned(t, r, f){
  14. var d = new Date();
  15. var h=d.getHours(),m=d.getMinutes(),s=d.getSeconds(),ms=d.getMilliseconds();
  16. if(h < 10){ h='0'+h; }
  17. if(m < 10){ m='0'+m; }
  18. if(s < 10){ s='0'+s; }
  19. if(ms < 10){ ms='00'+ms; }
  20. else if(ms < 100){ ms='0'+ms; }
  21. var ts = '['+h+':'+m+':'+s+'.'+ms+']';
  22. var li=null,hl = document.getElementById('history');
  23. if(blist.length > 0){
  24. li = document.createElement('li');
  25. li.className = 'ditem';
  26. hl.insertBefore(li, hl.childNodes[0]);
  27. } else{
  28. li = document.getElementById('nohistory');
  29. }
  30. li.id = blist.length;
  31. var html = '['+h+':'+m+':'+s+'.'+ms+']'+'  '+t+'码<div class="hdata">';
  32. html += r;
  33. html += '</div>';
  34. li.innerHTML = html;
  35. li.setAttribute('onclick', 'selected(id)');
  36. blist[blist.length] = {type:t,result:r,file:f};
  37. update(t, r, f);
  38. }
  39. function selected(id){
  40. var h = blist[id];
  41. update( h.type, h.result, h.file );
  42. if(h.result.indexOf('http://')==0 || h.result.indexOf('https://')==0){
  43. plus.nativeUI.confirm(h.result, function(i){
  44. if(i.index == 0){
  45. plus.runtime.openURL(h.result);
  46. }
  47. }, '', ['打开', '取消']);
  48. } else{
  49. plus.nativeUI.alert(h.result);
  50. }
  51. }
  52. function update(t, r, f){
  53. outSet('扫描成功:');
  54. outLine(t);
  55. outLine(r);
  56. outLine('\n图片地址:'+f);
  57. if(!f || f=='null'){
  58. img.src = '../img/barcode.png';
  59. } else{
  60. plus.io.resolveLocalFileSystemURL(f, function(entry){
  61. img.src=entry.toLocalURL();
  62. });
  63. //img.src = 'http://localhost:13131/'+f;
  64. }
  65. }
  66. function onempty(){
  67. if(window.plus){
  68. plus.nativeUI.alert('无扫描记录');
  69. } else {
  70. alert('无扫描记录');
  71. }
  72. }
  73. function cleanHistroy(){
  74. if(blist.length > 0){
  75. var hl = document.getElementById('history');
  76. hl.innerHTML = '<li id="nohistory" class="ditem" onclick="onempty();">无历史记录 </li>';
  77. }
  78. plus.io.resolveLocalFileSystemURL('_doc/barcode/', function(entry){
  79. entry.removeRecursively(function(){
  80. // Success
  81. }, function(e){
  82. //alert( "failed"+e.message );
  83. });
  84. });
  85. }
  86. // 打开二维码扫描界面
  87. function openBarcode(){
  88. createWithoutTitle('barcode_scan.html', {
  89. titleNView:{
  90. type: 'float',
  91. backgroundColor: 'rgba(215,75,40,0.3)',
  92. titleText: '扫一扫',
  93. titleColor: '#FFFFFF',
  94. autoBackButton: true,
  95. buttons: [{
  96. fontSrc: '_www/helloh5.ttf',
  97. text: '\ue302',
  98. fontSize: '18px',
  99. onclick: 'javascript:scanPicture()'
  100. }]
  101. }
  102. });
  103. }
  104. // 打开自定义扫描界面
  105. function openBarcodeCustom(){
  106. createWithoutTitle('barcode_custom.html', {
  107. titleNView:{
  108. type: 'float',
  109. backgroundColor: 'rgba(215,75,40,0.3)',
  110. titleText: '扫一扫',
  111. titleColor: '#FFFFFF',
  112. autoBackButton: true,
  113. buttons: [{
  114. fontSrc: '_www/helloh5.ttf',
  115. text: '\ue401',
  116. fontSize: '18px',
  117. onclick: 'javascript:switchFlash()'
  118. }]
  119. }
  120. });
  121. }
  122. </script>
  123. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  124. <style type="text/css" media="screen">
  125. .hdata {
  126. color: #e1673e;
  127. font-size: 14px;
  128. overflow: hidden;
  129. text-overflow: ellipsis;
  130. white-space: nowrap;
  131. }
  132. </style>
  133. </head>
  134. <body onload="img=document.getElementById('bimg')">
  135. <br/>
  136. <img style="width:40%" id="bimg" src="../img/barcode.png"/>
  137. <br/>
  138. <div class="button" onclick="openBarcode()">扫一扫</div>
  139. <div class="button" onclick="openBarcodeCustom()">扫一扫(自定义)</div>
  140. <br/>
  141. <ul id="history" class="dlist" style="text-align:left;">
  142. <li id="nohistory" class="ditem" onclick="onempty()">无历史记录 </li>
  143. </ul>
  144. <br/>
  145. <div class="button button-waring" onclick="cleanHistroy()">清空历史记录</div>
  146. <div id="outpos"/>
  147. <div id="output">
  148. Barcode提供二维码扫描识别功能,支持调用摄像头即时扫描二维码,也可直接输入图片进行扫描识别。
  149. </div>
  150. </body>
  151. </html>