用js语言写一个在线直尺测量小程序
时间: 2023-12-30 20:06:04 浏览: 42
好的,以下是一个简单的在线直尺测量小程序的JS代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>在线直尺测量小程序</title>
<style>
#ruler {
position:relative;
width: 500px;
height: 20px;
background-color: #f5f5f5;
border: 1px solid #cccccc;
margin-top: 50px;
margin-left: 50px;
padding: 10px;
box-sizing: border-box;
}
#ruler:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: #cccccc;
border: 1px solid #cccccc;
box-sizing: border-box;
}
#ruler:after {
content: "";
position: absolute;
top: 0;
left: 480px;
width: 20px;
height: 20px;
background-color: #cccccc;
border: 1px solid #cccccc;
box-sizing: border-box;
}
#ruler span {
position:absolute;
top: -30px;
font-size: 12px;
color: #666666;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="ruler">
<span id="startPos">0</span>
<span id="endPos">0</span>
</div>
<script>
var ruler = document.querySelector('#ruler');
var startPos = document.querySelector('#startPos');
var endPos = document.querySelector('#endPos');
var startX = 0;
var endX = 0;
var isMouseDown = false;
ruler.addEventListener('mousedown', function(e){
startX = e.clientX - ruler.offsetLeft;
isMouseDown = true;
});
ruler.addEventListener('mousemove', function(e){
if(isMouseDown){
endX = e.clientX - ruler.offsetLeft;
startPos.innerHTML = startX;
endPos.innerHTML = endX;
ruler.style.width = (endX - startX) + 'px';
}
});
ruler.addEventListener('mouseup', function(e){
isMouseDown = false;
});
</script>
</body>
</html>
```
代码中实现了一个基本的直尺测量功能,用户可以通过鼠标拖动直尺上的两个端点来测量长度,而HTML和CSS代码则用于构建一个简单的直尺界面。