JS演示图论汇总

BFS.js

var BFSClass = function () {this.isVisit = new Array();this.adj = new Array();this.vQueue = new Array();this.curV;this.temp = new Array();this.init = function (beginV) {this.curV = null;this.temp = [];//初始化顶点访问数组this.isVisit = [];for (var i = 0; i < vers.length; i++)this.isVisit.push(false);//初始化邻接矩阵this.adj = [];for (var i = 0; i < vers.length; i++) {this.adj[i] = new Array();for (var j = 0; j < vers.length; j++)this.adj[i][j] = 0;}for (var i = 0; i < edges.length; i++) {this.adj[this.Locate(edges[i].v1)][this.Locate(edges[i].v2)] = 1;this.adj[this.Locate(edges[i].v2)][this.Locate(edges[i].v1)] = 1;}//开始顶点入队列，修改顶点状态this.vQueue = [];this.vQueue.push(beginV);beginV.setStatus(1);this.isVisit[this.Locate(beginV)] = true;DrawGraph();Note(BFS.msg());}this.Next = function () {if (this.vQueue.length <= 0) {alert("遍历结束");return;}if (this.vQueue.length > 0) {this.temp = [];if (this.curV)this.curV.setStatus(1);this.curV = this.vQueue.shift();this.curV.setStatus(2);var cur = this.Locate(this.curV);for (var j = 0; j < vers.length; j++)if (this.adj[cur][j] == 1 && !this.isVisit[j]) {this.isVisit[j] = true;this.vQueue.push(vers[j]);this.temp.push(vers[j]);}if (BFS.temp.length > 0)drawLines(vers[cur], BFS.temp, function () {BFS.temp[0].setStatus(1);edges[BFS.LocateEg(vers[cur], BFS.temp[0])].setStatus(1);DrawGraph();}, function () {document.getElementById('NextBtn').disabled = false;});else {document.getElementById('NextBtn').disabled = false;}DrawGraph();Note(BFS.msg());}}this.Locate = function (v) {for (var i = 0; i < vers.length; i++)if (vers[i] == v)return i;return -1;}this.LocateEg = function (v1, v2) {for (var i = 0; i < edges.length; i++)if ((edges[i].v1 == v1 && edges[i].v2 == v2) || (edges[i].v1 == v2 && edges[i].v2 == v1))return i;return -1;}this.msg = function () {var s = " 当前顶点:" + BFS.curV.name + ".  队列内元素:";for (var i = 0; i < BFS.vQueue.length; i++)s += BFS.vQueue[i].name + " ";return s;}
}
var BFS = new BFSClass();

DFS.js

var DFSClass = function () {this.isVisit = new Array();this.adj = new Array();this.vstack = new Array();this.curV;this.init = function (beginV) {//初始化顶点访问数组this.isVisit = [];for (var i = 0; i < vers.length; i++)this.isVisit.push(false);//初始化邻接矩阵this.adj = [];for (var i = 0; i < vers.length; i++) {this.adj[i] = new Array();for (var j = 0; j < vers.length; j++)this.adj[i][j] = 0;}for (var i = 0; i < edges.length; i++) {this.adj[this.Locate(edges[i].v1)][this.Locate(edges[i].v2)] = 1;this.adj[this.Locate(edges[i].v2)][this.Locate(edges[i].v1)] = 1;}//开始顶点入栈，修改顶点状态this.vstack = [];this.vstack.push(beginV);this.isVisit[this.Locate(beginV)] = true;this.curV = beginV;beginV.setStatus(2);DrawGraph();Note(DFS.msg());}this.Next = function () {if (this.vstack.length <= 0) {alert("遍历结束");document.getElementById('NextBtn').disabled = false;return;}var cur = this.Locate(this.curV);for (var j = 0; j < vers.length; j++)if (this.adj[cur][j] == 1 && !this.isVisit[j]) {this.isVisit[j] = true;this.curV = vers[j];this.vstack.push(this.curV);drawLine(vers[cur], vers[j], function () {vers[cur].setStatus(1);vers[j].setStatus(2);edges[DFS.LocateEg(vers[cur], vers[j])].setStatus(1);DrawGraph();Note(DFS.msg());document.getElementById('NextBtn').disabled = false;});return;}this.curV = this.vstack.pop();if (this.vstack.length > 0) {drawLine(DFS.curV, DFS.vstack[DFS.vstack.length - 1], function () {DFS.curV.setStatus(1);DFS.curV = DFS.vstack[DFS.vstack.length - 1];DFS.curV.setStatus(2);DrawGraph();Note(DFS.msg());document.getElementById('NextBtn').disabled = false;});}else {this.curV.setStatus(1);DrawGraph();Note(DFS.msg());document.getElementById('NextBtn').disabled = false;}}this.Locate = function (v) {for (var i = 0; i < vers.length; i++)if (vers[i] == v)return i;return -1;}this.LocateEg = function (v1, v2) {for (var i = 0; i < edges.length; i++)if ((edges[i].v1 == v1 && edges[i].v2 == v2) || (edges[i].v1 == v2 && edges[i].v2 == v1))return i;return -1;}this.msg = function () {var s = " 当前顶点:" + DFS.curV.name + ".  栈内元素:";for (var i = 0; i < DFS.vstack.length; i++)s += DFS.vstack[i].name + " ";return s;}
}
var DFS = new DFSClass();

kruskal.js

var KruskalClass = function () {var eg;var edgeCount;this.flag = new Array();this.sortEdge = new Array();this.adj = new Array();this.init = function () {this.eg = null;this.edgeCount = 0;//初始化连通分量数组this.flag = [];for (var i = 0; i < vers.length; i++)this.flag.push(i);//初始化邻接矩阵this.adj = [];for (var i = 0; i < vers.length; i++) {this.adj[i] = new Array();for (var j = 0; j < vers.length; j++)this.adj[i][j] = Infinity;}for (var i = 0; i < edges.length; i++) {this.adj[this.Locate(edges[i].v1)][this.Locate(edges[i].v2)] = edges[i].weight;this.adj[this.Locate(edges[i].v2)][this.Locate(edges[i].v1)] = edges[i].weight;}//边排序this.sortEdge = [];for (var i = 0; i < edges.length; i++)this.sortEdge.push(edges[i]);this.sortEdge.sort(this.sortNumber);Note(this.msg());}this.Next = function () {if (Number(Kruskal.edgeCount) >= vers.length - 1) {alert("求解结束");return;}while (this.flag[this.Locate(this.sortEdge[0].v1)] == this.flag[this.Locate(this.sortEdge[0].v2)])this.sortEdge.shift();this.eg = this.sortEdge[0];blink(this.eg, function () {Kruskal.eg.setStatus(1);Kruskal.eg.v1.setStatus(1);Kruskal.eg.v2.setStatus(1);var v1Num = Kruskal.flag[Kruskal.Locate(Kruskal.eg.v1)];var v2Num = Kruskal.flag[Kruskal.Locate(Kruskal.eg.v2)];for (var i = 0; i < Kruskal.flag.length; i++)if (Kruskal.flag[i] == v1Num)Kruskal.flag[i] = v2Num;Kruskal.sortEdge.shift();DrawGraph();Kruskal.edgeCount++;document.getElementById('NextBtn').disabled = false;Note(Kruskal.msg(Kruskal.eg));});}this.Locate = function (v) {for (var i = 0; i < vers.length; i++)if (vers[i] == v)return i;return -1;}this.LocateEg = function (v1, v2) {for (var i = 0; i < edges.length; i++)if ((edges[i].v1 == v1 && edges[i].v2 == v2) || (edges[i].v1 == v2 && edges[i].v2 == v1))return i;return -1;}this.msg = function (e) {var s = "本次加入边:" + e.v1.name + e.v2.name;return s;}this.sortNumber = function (a, b) {return a.weight - b.weight;}}
var Kruskal = new KruskalClass();

prim.js

var PrimClass = function () {var eg, trueV, falseV;this.flag = new Array();this.tree = new Array();this.adj = new Array();this.init = function (beginV) {this.eg = null;this.trueV = null;this.falseV = null;this.tree = [];//初始化顶点访问数组this.flag = [];for (var i = 0; i < vers.length; i++)this.flag.push(false);//初始化邻接矩阵this.adj = [];for (var i = 0; i < vers.length; i++) {this.adj[i] = new Array();for (var j = 0; j < vers.length; j++)this.adj[i][j] = Infinity;}for (var i = 0; i < edges.length; i++) {this.adj[this.Locate(edges[i].v1)][this.Locate(edges[i].v2)] = edges[i].weight;this.adj[this.Locate(edges[i].v2)][this.Locate(edges[i].v1)] = edges[i].weight;}//设置顶点和边的状态this.flag[this.Locate(beginV)] = true;beginV.setStatus(1);this.setEdges();DrawGraph();Note(Prim.msg(beginV));}this.Next = function () {if (this.tree.length >= vers.length - 1) {alert("求解结束");return;}this.eg = this.getMinEdge();if (this.flag[this.Locate(edges[this.eg].v1)]) {this.trueV = edges[this.eg].v1; this.falseV = edges[this.eg].v2;}else {this.trueV = edges[this.eg].v2; this.falseV = edges[this.eg].v1;}drawLine(this.trueV, this.falseV, function () {Prim.flag[Prim.Locate(Prim.falseV)] = true;Prim.falseV.setStatus(1);Prim.tree.push(edges[Prim.eg]);Prim.setEdges();DrawGraph();document.getElementById('NextBtn').disabled = false;Note(Prim.msg(Prim.falseV));});}this.Locate = function (v) {for (var i = 0; i < vers.length; i++)if (vers[i] == v)return i;return -1;}this.LocateEg = function (v1, v2) {for (var i = 0; i < edges.length; i++)if ((edges[i].v1 == v1 && edges[i].v2 == v2) || (edges[i].v1 == v2 && edges[i].v2 == v1))return i;return -1;}this.msg = function (v) {var s = " 本次加入生成树的顶点为:" + v.name;return s;}this.setEdges = function () {for (var i = 0; i < edges.length; i++) {if (this.flag[this.Locate(edges[i].v1)] != this.flag[this.Locate(edges[i].v2)])edges[i].setStatus(2);elseedges[i].setStatus(0);}for (var i = 0; i < this.tree.length; i++)this.tree[i].setStatus(1);}this.getMinEdge = function () {var minWeight = Infinity, minPosition = -1;for (var i = 0; i < edges.length; i++) {if (this.flag[this.Locate(edges[i].v1)] != this.flag[this.Locate(edges[i].v2)] && edges[i].weight < minWeight) {minWeight = edges[i].weight;minPosition = i;}}return minPosition;}
}
var Prim = new PrimClass();

JS.js

//半径
var r = 10;
//鼠标状态
var mStatus = 3;
//画边时的第一个点
var selectV = null;
//顶点数组
var vers = new Array();
//边数组
var edges = new Array();
//邻接矩阵
var adj = new Array();
//遍历栈、队列
var vstack = new Array();
//接收canvas的onclick事件
function CanvasClick(e) {e = e || event;var canvas = document.getElementById('MyCanvas');var x = e.clientX - canvas.offsetLeft;var y = e.clientY - canvas.offsetTop;switch (mStatus){case 0:AddV(x, y);break;case 1:Select(x, y);break;case 2:AddE(x,y);break;default:break;}}
//添加顶点
function AddV(x, y) {//检查坐标是否符合添加顶点的要求if (CheckPoint(x, y)) {var v = new vertex(x, y);vers.push(v);DrawGraph();Output(" * 添加顶点:" + v.name + "。位置:" + v.x + "," + v.y + "<br/>");}
}
//选择顶点
function Select(x, y) {for (var i = 0; i < vers.length; i++)if (Math.sqrt((vers[i].x - x) * (vers[i].x - x) + (vers[i].y - y) * (vers[i].y - y)) <= 10) {selectV = vers[i];selectV.isSelect = true;DrawGraph();mStatus = 2;Output("<font color='red'>" + " * 选中顶点:" + selectV.name + "</font><br/>");var canvas = document.getElementById('MyCanvas');canvas.style.cursor = 'url(画边.png),auto';}
}
//添加边
function AddE(x, y) {for (var i = 0; i < vers.length; i++)if (Math.sqrt((vers[i].x - x) * (vers[i].x - x) + (vers[i].y - y) * (vers[i].y - y)) <= 10) {var eg = new edge(selectV, vers[i]);edges.push(eg);selectV.isSelect = false;DrawGraph();mStatus = 1;var canvas = document.getElementById('MyCanvas');canvas.style.cursor = 'url(选点.png),auto';Output("<font color='blue'>" + " * 添加边:" + eg.v1.name + eg.v2.name + "</font><br/>");}
}
//信息输出
function Output(msg) {var outputDiv = document.getElementById('OutputDiv');outputDiv.innerHTML += msg;
}
//画顶点前检查坐标是否符合要求
function CheckPoint(x, y) {if (x < 30 || x > 650 || y < 30 || y > 350)return false;for (var i = 0; i < vers.length; i++) {if (Math.sqrt((vers[i].x - x) * (vers[i].x - x) + (vers[i].y - y) * (vers[i].y - y)) < 60)return false;}return true;
}//画点事件
function AddVBtnClick() {mStatus = 0;var canvas = document.getElementById('MyCanvas');canvas.style.cursor = 'url(画点.png),auto';
}
//画边事件
function AddEBtnClick() {if (selectV) {selectV.isSelect = false;var n = selectV.name;selectV = null;DrawGraph();Output("<font color='red'>" + " * 取消顶点:" + n + "</font><br/>");}else {mStatus = 1;var canvas = document.getElementById('MyCanvas');canvas.style.cursor = 'url(选点.png),auto';}
}
//绘图
function DrawGraph() {var canvas = document.getElementById('MyCanvas');canvas.width = canvas.width;if (canvas.getContext) {var ctx = canvas.getContext('2d');for (var i = 0; i < vers.length; i++)vers[i].draw(ctx);for (var i = 0; i < edges.length; i++) {edges[i].draw(ctx);}}
}
//顶点构造函数
var vertex = function (x, y) {this.x = x;this.y = y;this.name = String.fromCharCode(0x41 + vers.length);this.isSelect = false;this.isVisit = false;this.draw = function (ctx) {ctx.save();ctx.beginPath();ctx.strokeStyle = "#000000";ctx.arc(this.x, this.y, r, 2 * Math.PI, 0, true);ctx.closePath();ctx.stroke();if (this.isVisit) {ctx.fillStyle = "#00FF00";ctx.fill();}if (this.isSelect) {ctx.fillStyle = "#FFFF00";ctx.fill();}ctx.fillStyle = "#FF0000";ctx.fillText(this.name, parseInt(this.x) - 3, parseInt(this.y) + 3);ctx.restore();}
}
//边构造函数
var edge = function (v1, v2) {this.v1 = v1;this.v2 = v2;this.isVisit = false;this.draw = function (ctx) {var x1 = parseInt(v1.x), y1 = parseInt(v1.y), x2 = parseInt(v2.x), y2 = parseInt(v2.y);var a = x1 - x2, b = y1 - y2, c = Math.sqrt(a * a + b * b);var beginX = x1 - a * r / c, beginY = y1 - b * r / c;var endX = x2 + a * r / c, endY = y2 + b * r / c;ctx.save();ctx.beginPath();if (this.isVisit)ctx.strokeStyle = "#FF0000";elsectx.strokeStyle = "#000000";ctx.moveTo(beginX, beginY);ctx.lineTo(endX, endY);ctx.stroke();ctx.closePath();ctx.restore();}
}function loadXmlFile(xmlFile) {var xmlDom = null;if (window.ActiveXObject) {xmlDom = new ActiveXObject("Microsoft.XMLDOM");xmlDom.async = false;xmlDom.load(xmlFile) || xmlDom.loadXML(xmlFile); //如果用的是XML字符串//如果用的是xml文件  }else if (document.implementation && document.implementation.createDocument) {var xmlhttp = new window.XMLHttpRequest();xmlhttp.open("GET", xmlFile, false);xmlhttp.send(null);xmlDom = xmlhttp.responseXML;} else {xmlDom = null;}return xmlDom;
}function DrawBtnClick() {var canvas = document.getElementById('MyCanvas');canvas.width = canvas.width;vers = [];edges = [];var ctrlDiv = document.getElementById('CtrlDiv');CtrlDiv.innerHTML = "<input id=\"AddVBtn\" type=\"button\" value=\"画点\" onclick=\"AddVBtnClick();\" />";CtrlDiv.innerHTML += "<input id=\"AddEBtn\" type=\"button\" value=\"画边\" onclick=\"AddEBtnClick();\" />";
}
//清空
function ClearBtnClick() {var canvas = document.getElementById('MyCanvas');canvas.width = canvas.width;vers = [];edges = [];var ctrlDiv = document.getElementById('CtrlDiv');CtrlDiv.innerHTML = "";
}
//保存
function SaveBtnClick() {var verStr="";for (var i = 0; i < vers.length; i++) {verStr += vers[i].x + "," + vers[i].y + "," + vers[i].name;if (i != vers.length-1)verStr += ".";}var egStr="";for (var i = 0; i < edges.length; i++) {egStr += edges[i].v1.name + "," + edges[i].v2.name;if (i != edges.length-1)egStr += ".";}document.getElementById("HiddenField").value = verStr + "|" + egStr;
}
//载入
function LoadBtnClick() {var xmlDoc = loadXmlFile("XMLFile.xml");var k = xmlDoc.getElementsByTagName("Graph").length;var s = "<select id=\"GraphSelect\">";for (var i = 0; i < k; i++) {s+="<option>"+xmlDoc.getElementsByTagName("Graph")[i].getAttribute('name')+"</option>";}s += "</select>";s += "<input id=\"SubmitBtn\" type=\"button\" value=\"提交\" onclick=\"SubmitBtnClick();\" />";var ctrlDiv = document.getElementById('CtrlDiv');CtrlDiv.innerHTML = s;
}
function SubmitBtnClick() {var gname=document.getElementById('GraphSelect').value;var xmlDoc = loadXmlFile("XMLFile.xml");var count = xmlDoc.getElementsByTagName("Graph").length;var vNode, eNode;for (var i = 0; i < count; i++) if (xmlDoc.getElementsByTagName("Graph")[i].getAttribute('name') == gname) {vNode = xmlDoc.getElementsByTagName("Graph")[i].getElementsByTagName("vertexs")[0];eNode = xmlDoc.getElementsByTagName("Graph")[i].getElementsByTagName("edges")[0];break;}vers = [];for (var j = 0; j < vNode.getElementsByTagName("v").length; j++) {var x = vNode.getElementsByTagName("v")[j].getAttribute('x');var y = vNode.getElementsByTagName("v")[j].getAttribute('y');var name = vNode.getElementsByTagName("v")[j].getAttribute('name');var v = new vertex(x, y);v.name = name;vers.push(v);}edges = [];for (var j = 0; j < eNode.getElementsByTagName("eg").length; j++) {var v1,v2;for (var k = 0; k < vers.length; k++) {if (eNode.getElementsByTagName("eg")[j].getAttribute('v1') == vers[k].name)v1 = vers[k];if (eNode.getElementsByTagName("eg")[j].getAttribute('v2') == vers[k].name)v2=vers[k];}var eg = new edge(v1, v2);edges.push(eg);}DrawGraph();
}
//输出vstack内元素
function OutVstack() {for (var i = 0; i < vstack.length; i++) {Output(vstack[i].name+" ");}Output("<br/>");
}
//DFS遍历演示
function ShowDFSBtnClick() {if (vers.length <= 0)return;var s = "<select id=\"VertexSelect\">";for (var i = 0; i < vers.length; i++) {s += "<option>" + vers[i].name + "</option>";}s += "</select>";s += "<input id=\"BeginDFSBtn\" type=\"button\" value=\"开始\" onclick=\"BeginDFSBtnClick();\" />";s += "<input id=\"NextDFSBtn\" type=\"button\" value=\"下一步\" onclick=\"NextDFSBtnClick();\" />";var ctrlDiv = document.getElementById('CtrlDiv');CtrlDiv.innerHTML = s;
}
function Locate(v) {for (var i = 0; i < vers.length; i++)if (vers[i] == v)return i;return -1;
}
function LocateEg(v1, v2) {for (var i = 0; i < edges.length; i++)if ((edges[i].v1 == v1 && edges[i].v2 == v2)||(edges[i].v1 == v2 && edges[i].v2 == v1))return i;return -1;
}
function BeginDFSBtnClick() {var outputDiv = document.getElementById('OutputDiv');outputDiv.innerHTML = "";//初始化邻接矩阵，栈adj = [];for (var i = 0; i < vers.length; i++) {adj[i] = new Array();for (var j = 0; j < vers.length; j++)adj[i][j] = 0;}for (var i = 0; i < edges.length; i++) {adj[Locate(edges[i].v1)][Locate(edges[i].v2)] = 1;adj[Locate(edges[i].v2)][Locate(edges[i].v1)] = 1;}vstack = [];//获取开始顶点var vname = document.getElementById('VertexSelect').value;//开始顶点入栈，修改顶点状态，重绘图for (var i = 0; i < vers.length; i++)if (vers[i].name == vname) {vstack.push(vers[i]);vers[i].isVisit = true;vers[i].isSelect = true;Output(" * 访问顶点" + vers[i].name + "<br/>");Output(" * 顶点" + vers[i].name + "入栈,当前顶点为:" + vers[i].name + "<br/>");}DrawGraph();
}
function NextDFSBtnClick() {if (vstack.length <= 0) {alert("遍历结束");Output("<br/> * 遍历结束<br/>");return;}var cur = Locate(vstack[vstack.length - 1]);for (var j = 0; j < vers.length; j++)if (adj[cur][j] == 1 && !vers[j].isVisit) {vers[j].isVisit = true;vers[j].isSelect = true;vers[cur].isSelect = false;vstack.push(vers[j]);edges[LocateEg(vers[cur], vers[j])].isVisit = true;DrawGraph();Output(" * 通过顶点" + vers[cur].name + "访问顶点" + vers[j].name +  ",");Output("顶点" + vers[cur].name + "入栈,当前顶点为:" + vers[j].name + "<br/>");return;}vers[cur].isSelect = false;Output(" * 将顶点" + vers[cur].name + "出栈");vstack.pop();if (vstack.length > 0) {vstack[vstack.length - 1].isSelect = true;Output(",当前顶点为:" + vstack[vstack.length - 1].name + "<br/>");}DrawGraph();
}//BFS遍历演示
function ShowBFSBtnClick() {if (vers.length <= 0)return;var s = "<select id=\"VertexSelect\">";for (var i = 0; i < vers.length; i++) {s += "<option>" + vers[i].name + "</option>";}s += "</select>";s += "<input id=\"BeginBFSBtn\" type=\"button\" value=\"开始\" onclick=\"BeginBFSBtnClick();\" />";s += "<input id=\"NextBFSBtn\" type=\"button\" value=\"下一步\" onclick=\"NextBFSBtnClick();\" />";var ctrlDiv = document.getElementById('CtrlDiv');CtrlDiv.innerHTML = s;
}
function BeginBFSBtnClick() {var outputDiv = document.getElementById('OutputDiv');outputDiv.innerHTML = "";//初始化邻接矩阵，队列adj = [];for (var i = 0; i < vers.length; i++) {adj[i] = new Array();for (var j = 0; j < vers.length; j++)adj[i][j] = 0;}for (var i = 0; i < edges.length; i++) {adj[Locate(edges[i].v1)][Locate(edges[i].v2)] = 1;adj[Locate(edges[i].v2)][Locate(edges[i].v1)] = 1;}vstack = [];//获取开始顶点var vname = document.getElementById('VertexSelect').value;//开始顶点入队列，修改顶点状态，重绘图for (var i = 0; i < vers.length; i++)if (vers[i].name == vname) {vstack.push(vers[i]);vers[i].isVisit = true;vers[i].isSelect = true;Output(" * 访问顶点" + vers[i].name + "<br/>");Output(" * 顶点" + vers[i].name + "入队<br/>");Output("队列内元素:");OutVstack();Output("<font color='red'>  * 当前顶点为:" + vers[i].name + "</font><br/>");}DrawGraph();
}
function NextBFSBtnClick() {if (vstack.length <= 0) {alert("遍历结束");Output("<br/> * 遍历结束<br/>");return;}var cur = Locate(vstack[0]);for (var j = 0; j < vers.length; j++)if (adj[cur][j] == 1 && !vers[j].isVisit) {vers[j].isVisit = true;vstack.push(vers[j]);Output(" * 访问顶点" + vers[j].name + "并入队<br/>");edges[LocateEg(vers[cur], vers[j])].isVisit = true;}vstack.shift();vers[cur].isSelect = false;if (vstack.length <= 0) {alert("遍历结束");Output("<br/> * 遍历结束<br/>");DrawGraph();return;}vstack[0].isSelect = true;DrawGraph();Output("队列内元素:");OutVstack();Output("<font color='red'> * 当前顶点为:" + vstack[0].name + "</font><br/>");
}function DelBtnClick() {var canvas = document.getElementById('MyCanvas');canvas.style.cursor = 'url(删除.png),auto';
}

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/444622.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Shell脚本自动监控docker容器的状态

Shell脚本自动监控docker容器的状态

首先我们来写一个脚本rootserver:~# cat docker_monitor.sh #!/bin/bash #监控容器的运行状态 #容器名称 传入参数 containerName$1 #当前时间 nowdate "%Y-%m-%d %H:%M:%S"# 查看进程是否存在 existdocker inspect --format {{.State.Running}} ${containerNam…
阅读更多...
Python模块(9)-Time,Json 简易使用教程

Python模块(9)-Time,Json 简易使用教程

Time,Json简易使用教程1 Time1.1 获取时间1.2 程序计时2 Json1 Time Python中内置了一些与时间处理相关的库&#xff0c;如time、datatime和calendar库。其中time库是Python中处理时间的标准库&#xff0c;是最基础的时间处理库&#xff0c;提供如下功能功&#xff1a; &#…
阅读更多...
AWS的VPC使用经验（一）

AWS的VPC使用经验（一）

Amazon VPC 概念 Amazon VPC 是 Amazon EC2 的网络化阶层。如果您是首次使用 Amazon EC2，请参阅 Amazon EC2 用户指南（适用于 Linux 实例） 中的什么是 Amazon EC2？以获取简要概述。 以下是 VPC 的主要概念： Virtual Private Cloud (VPC) 是仅适用于您的 AWS 账户的虚拟网…
阅读更多...
AWS的VPC使用经验（二）

AWS的VPC使用经验（二）

上文说了如何创建自定义VPC网络的EC2实例&#xff0c;这节说如何在多个VPC之间创建对等连接。 这里分别填写自己的VPC和对方的VPC的ID信息&#xff0c;然后在对方的VPC里就能看到有连接请求&#xff0c;在对方的连接请求里选择 “操作”->接受。 到这里已经快要收尾了&…
阅读更多...
ML Tools List

ML Tools List

文章目录1.Pyorch2.TensorFlow3. Other1.Pyorch Pytorch(1)-内置/自己设计的损失函数使用 Pytorch(2)-tensor常用操作 Pytorch(3)–数据载入接口&#xff1a;Dataloader、datasets Pytorch(4)-模型保存-载入-eval() Pytorch(5)-梯度反向传播 Pytorch(6)–设置随机种子&am…
阅读更多...
ubuntu nginx配置负载均衡篇（一）

ubuntu nginx配置负载均衡篇（一）

Nginx 代理服务的配置说明 1、设置 404 页面导向地址 error_page 404 https://www.runnob.com; #错误页 proxy_intercept_errors on; #如果被代理服务器返回的状态码为400或者大于400，设置的error_page配置起作用。默认为off。 2、如果我们的代理只允许接受get，post请求…
阅读更多...
坦克大战

坦克大战

效果 map.js var map4 [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,2,2,0,0,2,2,0,0,0,2,2,0,0,2,2,0,0,2,2,0,2,2,0],[0,2,2,0,0,2,2,0,0,0,2,2,3,3,2,2…
阅读更多...
ubuntu nginx配置负载均衡篇（二）

ubuntu nginx配置负载均衡篇（二）

这里提供部分我的配置文件： nginx.conf： user www-data; worker_processes auto; pid /run/nginx.pid; include /etc/nginx/modules-enabled/*.conf;events {worker_connections 768;# multi_accept on; }http {### Basic Settings##sendfile on;tcp_nopush on;tcp_nodelay…
阅读更多...
Papar Notes List

Papar Notes List

PaperNotes(1)-Modeling the World from Internet Photo Collections PaperNotes(2)-Generative Adversarial Nets PaperNotes(3)-图像分割-RCNN-FCN-Boxsup PaperNotes(4)-高质量图像生成-cgan,stackgan,lapgan,cyclegan,pix2pixgan PaperNotes(5)-Conditional Generative Adv…
阅读更多...
windows安装 MySQL5.7服务端

windows安装 MySQL5.7服务端

1，安装https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.30-winx64.zip mysql安装包。 2. 自己配置my.ini [client] port=3306 [mysql] default-character-set=utf8[mysqld] character-set-server=utf8 port=3306 basedir="D:/mysql-5.7.30-winx64/" datad…
阅读更多...
screen命令使用说明

screen命令使用说明

有些程序写的很操蛋&#xff0c;比如放到后台执行&#xff0c;但后边还需要再切回前台来重新执行&#xff0c;这个时候我们选择screen工具&#xff1a; screen -d -m -S LoginServer[6001] ./run_login_server.sh 具体的screen命令包含哪些参数&#xff0c;可以参考scree…
阅读更多...
看这玩意复习你还会挂科？《数据结构篇》

看这玩意复习你还会挂科？《数据结构篇》

一&#xff0e;绪论 1.何谓程序设计&#xff1f; 程序 算法 数据结构 2.数据结构的定义 是相互之间存在一种或多种特定关系的数据元素的集合 3.数据、数据元素、数据对象的概念 数据&#xff08;data&#xff09;&#xff1a;对客观事物的符号表示&#xff0c;含义很广&am…
阅读更多...
Machine Learning List

Machine Learning List

机器学习&#xff1a; 每多加一个符号&#xff0c;就多加一个变量。 每次确定给定量&#xff0c;其余均可变&#xff0c;方便分析问题。 MachineLearning(1)-激活函数sigmoid、损失函数MSE、CrossEntropyLoss MachineLearning(2)-图像分类常用数据集 MachineLearning(3)-流型 …
阅读更多...
反编译用unity打包的资源文件

反编译用unity打包的资源文件

如何反编译破解别人家的游戏包，美术资源是维权和侵权一直杠下去的话题，如果作为商业用途，我是反对破坏原作者的创意，侵害作者的劳动果实行为。但是如果是仅仅为了学习，实验，不妨参考我的文章，我相信你可以从我的文章里获取如何破解通过unity打包的移动游戏美术资源。 之…
阅读更多...
看这玩意复习你还会挂科？《网络原理篇》

看这玩意复习你还会挂科？《网络原理篇》

第一章 概述 计算机网络的功能 连通性、共享 【连通性&#xff1a;是计算机网络使上网用户之间都可以交换信息&#xff0c;好像这些用户的计算机都可以彼此直接连接一样。用户之间的距离也似乎因此而变近了。共享&#xff1a;是指资源共享&#xff0c;它的含义是多方面的&…
阅读更多...
苹果订阅服务器端开发

苹果订阅服务器端开发

有时候我们想做一个苹果订阅功能，需要在苹果开发者后台添加订阅商品productid/ 订阅需要增加一个参数: password: 秘钥, 就可以了, 但是官方文档说秘钥仅仅用在自动续订上面 大家叫后台加个验证，如果苹果验证返回21004的话（21004 你提供的共享密钥和账户的共享密钥不一致）…
阅读更多...
Mysql服务器线上配置主从同步

Mysql服务器线上配置主从同步

我们一般在线上搭建MYSQL都会部署一套主从同步方案： 当master(主)库的数据发生变化的时候，变化会实时的同步到slave(从)库。 主从复制的过程： Mysql同步过程的第一部分就是master服务器记录二进制日志。在每个事务更新数据完成之前，master在二日志记录这些改变。MySQL将事…
阅读更多...
nginx代理配置根据ip地址来转发到不同的地址端口

nginx代理配置根据ip地址来转发到不同的地址端口

最近我们在开发的某SLG游戏的某业务要做如下场景： 要求在全球各个区域访问离他最近的服务器节点：用户通过访问域名A，在服务器端解析用户来源，根据ip地址来源来转发到对应的最近的服务器节点。 由于我们之前的业务一些设计很难调整，所以我将通过代码层面来进行做转发处理，…
阅读更多...
看这玩意复习你还会挂科？《web开发1篇》

看这玩意复习你还会挂科？《web开发1篇》

#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统&#xff0c;通过互联网访问。 2、web&#xff1a;worldwideweb&#xff0c;万维网&#xff0c;简称web&#xff0c;www&#xff0c;通常称为网页。 3、web开发&#xff1a;进行网页页…
阅读更多...
如何禁止掉root登录，使用key密钥登录

如何禁止掉root登录，使用key密钥登录

在Linux系统下执行命令&#xff1a; ssh-keygen -t rsa cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys vim /etc/ssh/sshd_config AuthorizedKeysFile .ssh/authorized_keys RSAAuthentication yes PubkeyAuthentication yes PasswordAuthentication n…
阅读更多...
最新文章

Copyright @ 2022~2023