canvas = $('#myCanvas')[0]
ctx = canvas.getContext('2d')
// 画出左边到右边的连接
linkWith: function(ctxx, leftIndex, rightIndex) {
console.log("link "+leftIndex+" with "+rightIndex)
ctxx.beginPath()
ctxx.moveTo(0.5,(2*leftIndex-1)*cellHeight + 0.5)
ctxx.lineWidth=1
ctxx.lineTo(canvasWidth +0.5,(2*rightIndex-1)*cellHeight + 0.5)
ctxx.stroke()
ctxx.closePath()
},
你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整代码如下
<%@ page contentType="text/htmlcharset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function drawThis(obj){
if(obj.style.border=="1px solid red"){
obj.style.border="1px solid blue"
}else{
obj.style.border="1px solid red"
}
var div = document.getElementsByTagName("div")
var leftX = ""
var leftY = ""
var rightX=""
var rightY=""
for ( var i = 0i <div.lengthi++) {
if(div[i].style.border=="1px solid blue"){
if(div[i].className=="left"){
leftX = $(div[i]).position().left+70
leftY = $(div[i]).position().top+35
}else if(div[i].className=="right"){
rightX = $(div[i]).position().left
rightY = $(div[i]).position().top+35
}
}
}
if(rightX!=""&&leftX!=""){
for ( var i = 0i <(rightX-leftX)/2i++) {
var newDiv = document.createElement("div")
var y = (rightY-leftY)/((rightX-leftX)/2)
$(newDiv).css("background-color", "red")
$(newDiv).css("z-index","2")
$(newDiv).css("left",(leftX+i*4))
$(newDiv).css("top",(leftY+i*y))
$(newDiv).css("height",y+"px")
$(newDiv).css("width","4px")
$(newDiv).css("position","absolute")
$("#detail").append(newDiv)
}
}
}
</script>
</head>
<body>
<div align="center" style="margin-top: 20pxmargin-left: 30%" id="detail">
<div class="left" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px" onclick="drawThis(this)">a</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">1</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">b</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">2</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">c</div>
<div class="right" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px" onclick="drawThis(this)">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>test</title>
<style type="text/css">
</style>
<script type="text/javascript">
var timer = null, SLEEP = 1000
var timef = function ()
{
var time = document.getElementById ('time')
var s = parseInt (time.firstChild.nodeValue)
time.firstChild.nodeValue = s - 1 + 's'
if (s == 1)
{
alert ('time expires')
time.firstChild.nodeValue = '10s'
clearTimeout (timer)
return
}
timer = setTimeout (timef, SLEEP)
}
</script>
</head>
<body>
Remaining Time:
<span id="time">10s</span>
<br / >
<button onclick="timef()">time</button>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）