jqueRy扫,jquery扫码

jQuery怎样实现扫雷

1）jquery.tableGen.js，这段js的作用是产生一个表格，表格中显示数字和雷区，调用的方法很简单，如下:

西和网站建设公司成都创新互联公司,西和网站设计制作，有大型网站制作公司丰富经验。已为西和成百上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的西和做网站的公司定做！

var options ={

rows:5,

cols:5,

percent:0.1

};

$("table").tableGen(options);  

思路是：根据table的单元格的数目随机产生percent的雷，并填充td。然后遍历所有的td，查找周围雷的个数来填充单元格的数字

[javascript] view plain copy

var neigUp = new Array();

var neig = new Array();

var neigDw = new Array();

var cols,rows;

var table,tds;

var colors =["black","blue","red","orange","yellow","green","black","black"];   var mineNum ;

function($){

var randoms = function(max,percent){

// General digital between 0 and max num times

if(!max)max =100;

if(!percent) percent =0.1;

num = max*percent;

var i=0;

var arr = new Array();

while(inum)   arr[i++]=Math.floor(Math.random()*max);

return arr;

}

$.fn.tableGen = function(options){

var setting = $.extend({

rows:10,

cols:10,

percent:0.1

},options || {}

);

rows = setting.rows;

cols = setting.cols;

neigUp = [-(cols+1),-cols,-(cols-1)];

neig =[-1,1];

neigDw =[cols-1,cols,cols+1];  

var str = "";

for(var j=0;jsetting.rows;j++){

str+="tr";

for(var i=0;isetting.cols;i++){

str+="td"+i+"/td";

}

str+="/tr";

}

this.empty();

this.append(str);

$("td",this).addClass("org");       // orginal color

//fill

var arr = randoms(setting.rows*setting.cols,setting.percent);

tds = $("td",this);

mineNum = arr.length;

for(var i=0;iarr.length;i++){

$(tds[arr[i]]).addClass("mine").html("span"+"*"+"/span").find("span").css("opacity",0);

}

// add tips number to regular cells

var $this =this;

tds.each(function(i){

if($(this).text() == "*") return;

var cnt = 0;

var seq = i;

for(var i=0;ineig.length;i++){

var p = neig[i]+seq;

if(tds[p]Math.floor(p/cols) == Math.floor(seq/cols)  $(tds[p]).text() == "*") cnt++;

}

for(var i=0;ineigUp.length;i++){

var p = neigUp[i]+seq;

if(tds[p]Math.floor(p/cols)+1 == Math.floor(seq/cols ) $(tds[p]).text() == "*") cnt++;

}

for(var i=0;ineigDw.length;i++){

var p = neigDw[i]+seq;

if(tds[p]Math.floor(p/cols)-1 == Math.floor(seq/cols)  $(tds[p]).text() == "*") cnt++;

}

if(!cnt)    { cnt = ""; colors[""]="";}

$(this).html("span"+cnt+"/span").css("color",colors[cnt]).find("span").css("opacity",0);

});

tds.addClass("mark");

} // tableGen Fn end

)(jQuery);

2）jquery.fill.js。这段代码的作用是定义点击事件，每次点击根据点击的内容来显示周围的区域或者提示成功失败

[javascript] view plain copy

(function($){

neig =[-1,1];

neigDw =[cols];

neigUp = [-cols];

var recover =function(td,table){

if(!td)       return;

if(!td.attr)  td = $(td);

if(!td.hasClass("mark")){

return;

}

if(td.text() == ""){

td.removeClass("mark").find("span").css("opacity",1);

}

else if(td.text() !="*"){

td.removeClass("mark").find("span").css("opacity",1);

return;

}

else if(td.text() == "*"){

return;

}

var seq = td.index("td",table);

tds = table.filter("td");

/*----------------------------*/

for(var i=0;ineig.length;i++){

var p = neig[i]+seq;

if(tds[p]Math.floor(p/cols) == Math.floor(seq/cols)  $(tds[p]).text() != "*") {

recover($(tds[p]),table);

}

}

for(var i=0;ineigUp.length;i++){

var p = neigUp[i]+seq;

if(tds[p]Math.floor(p/cols)+1 == Math.floor(seq/cols ) $(tds[p]).text() != "*") {

recover($(tds[p]),table);

}

}

for(var i=0;ineigDw.length;i++){

var p = neigDw[i]+seq;

if(tds[p]Math.floor(p/cols)-1 == Math.floor(seq/cols)  $(tds[p]).text() != "*") {

recover($(tds[p]),table);

}

}

}

$.fn.fill = function(){

table = $(this);

tds =$("td",table);

var mineCnt = 0;

tds.click(function(event){

if($(this).text() != "*"){

if(event.altKey){

tds.removeClass("mark").find("span").css("opacity",1);

var rs = confirm("No Bomb here !Bad Luck,Try Again?");

if(rs){

table.tableGen(options).fill();

}

return;

}

}

if($(this).text() == "*"){

$(this).removeClass("mark").find("span").css("opacity",1);

var event = event || window.event;

if(event.altKey){

mineCnt++;

if(mineCnt == mineNum){

var rs = confirm("congratulations!Try Again?");

if(rs){

table.tableGen(options).fill();

}

return;

}

return;

}

// Game over

tds.removeClass("mark").find("span").css("opacity",1);

var rs = confirm("Bomb!Bad Luck,Try Again?");

if(rs){

table.tableGen(options);

table.fill();

}

}

else if($(this).text() !="*"  $(this).text() !=""){

$(this).removeClass("mark").find("span").css("opacity",1);

}

else

recover($(this),tds);

});

};

})(jQuery);

[html] view plain copy

!-- !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

head

script type="text/javascript" src="jquery.js"/script

script type="text/javascript" src="jquery.table.js"/script

script type="text/javascript" src="jquery.fill.js"/script

titleMine/title

style type="text/css"

table{

table-layout: fixed;

}

.org {

border:1px solid black;

background-color:white;

overflow: hidden;

width: 10px;

height:10px;

}

.mine{

}

.mark{

background-color: orange;

}

.flag{

background: url(flag.png);

background-color: blue;

}

/style

/head

body

h3Mine Game/h3

table colspan='4'

/table

script type="text/javascript" 

var options ={

rows:5,

cols:5,

percent:0.1

};

$("table").tableGen(options);

$("table").fill();

/script

/body

/html --

h5 js或者jquery实现二维码扫描功能 求demo

首先，扫描二维码需要调用手机摄像头，而网页本身是没法直接驱动硬件的；

SO：以Android为例：你可以用JS通过WebView调用Java方法，Java方法里面去写调用摄像头扫码二维码事件，将扫描结果在通过webview回传。

如何设置jquery.qrcode扫描二维码跳转页面

：首先下载jquery.qrcode插件 新建一个包括了jquery和jquery.qrcode的页面 调用qrcode插件 $('#qrcode').qrcode(""); //任意字符串 浏览器中时如下结果，默认情况下qrcode生成的是canvas图片，这样效率高