Sac*_*ara 5 javascript css html5 html5-canvas
我是实习前端开发人员,我正在进行一些演示.
它适用于onclick鼠标事件,但它不适用于onclick和onmouseover.我需要一个onclick选项,也需要一个onclick + mouseover选项.
这是我的html文件:
<html>
<head>
<link rel="stylesheet" type="text/css" href="MyStyle.css">
<script src="myScript.js"></script>
<title>Main page</title>
</head>
<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br />
<input id="btn" type="button" value=" + " onclick="incr()">
<input id="btn" type="button" value=" - " onclick="decr()">
<select id="hundred" onchange="setHundred()">
<option value=0> 0 </option>
<option value=100> 100 </option>
<option value=-100> -100 </option>
</select>
</body>
</html>
这是我的Javascript文件:
var can, ctx, hun, n = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
showN();
}
function showN() {
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
showN();
}
function decr() {
n--;
showN();
}
function setHundred() {
n = hun.value;
showN();
}
和css文件:
#btn, #hundred {
font: larger bold;
border-radius: 25px;
}
canvas {
background-color: black;
border: 1px solid rgb(64, 255, 64);
border-radius: 25px;
}
我的问题是:
我如何使用onclick以及onclick和onmouseover for
+&-？如果点击按下它也会增加
谢谢.
小智 3
无论如何，你的意思是这种实现吗？其中 onclick 和 mouseover 有相同的方法吗？
（下面更新了代码）我现在明白你的问题，对于这种情况，我使用 onmousedown 和 onmouseup + 间隔实现。
请检查以下内容：
var can, ctx, hun, n = 0;
var timer = null;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
showN();
}
function showN() {
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
showN();
}
function decr() {
n--;
showN();
}
function setHundred() {
n = hun.value;
showN();
}
function setTimer(type) {
timer = setInterval(function() {
if (type == 'incr') {
incr();
} else {
decr();
}
}, 200);
}
function removeTimer() {
clearInterval(timer);
}#btn, #hundred {
font: larger bold;
border-radius: 25px;
}
canvas {
background-color: black;
border: 1px solid rgb(64, 255, 64);
border-radius: 25px;
}<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br>
<input id="btnAdd" type="button" value=" + " onclick="incr()" onmousedown="setTimer('incr')" onmouseup="removeTimer()">
<input id="btnDeduct" type="button" value=" - " onclick="decr()" onmousedown="setTimer('decr')" onmouseup="removeTimer()">
<select id="hundred" onchange="setHundred()">
<option value=0> 0 </option>
<option value=100> 100 </option>
<option value=-100> -100 </option>
</select>
</body>