用js写一个签字确认页面
时间: 2023-12-19 07:04:37 浏览: 24
以下是一个基本的签字确认页面的HTML和JavaScript代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>签字确认页面</title>
</head>
<body>
<h1>签字确认页面</h1>
<div id="signature-pad">
<canvas></canvas>
<button id="clear">清除</button>
<button id="confirm">确认</button>
</div>
<script src="signature.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
//获取canvas元素和清除按钮元素
var canvas = document.querySelector("canvas");
var clearBtn = document.querySelector("#clear");
//设置canvas宽度和高度
canvas.width = 500;
canvas.height = 300;
//获取canvas上下文
var ctx = canvas.getContext("2d");
//设置画笔样式
ctx.lineWidth = 5;
ctx.strokeStyle = "#000";
//设置签字状态变量
var signatureDone = false;
//清除canvas内容
clearBtn.addEventListener("click", function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
signatureDone = false;
});
//监听鼠标事件
canvas.addEventListener("mousedown", function(e) {
if(signatureDone) return;
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
canvas.addEventListener("mousemove", onMouseMove);
});
canvas.addEventListener("mouseup", function() {
if(signatureDone) return;
canvas.removeEventListener("mousemove", onMouseMove);
ctx.stroke();
signatureDone = true;
});
function onMouseMove(e) {
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
}
//确认签字
var confirmBtn = document.querySelector("#confirm");
confirmBtn.addEventListener("click", function() {
if(signatureDone) {
alert("签字确认成功!");
} else {
alert("请先签字!");
}
});
```
通过以上代码,我们可以实现一个简单的签字确认页面,用户可以在canvas上手写签字,并且确认签字后会弹出提示框。当然,这只是一个基本的示例,实际应用中还需要更加完善的逻辑和界面设计。