我正在制作一种仪表控制。 仪表控件需要从文本框中获取值然后进行调整。 (也许有一个按钮，但那是稍后的事)
问题是我无法从 javascript 变量中的文本框中获取值。有没有这样的功能或东西？
变量是“var Degrees”，现在有一个随机值 250。
这是我的代码:
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css" />
<script>
window.onload = function () {
//canvas initialization
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//dimensions
var W = canvas.width;
var H = canvas.height;
//Variables
var degrees = 250;
//var new_degrees = 0;
var difference = 0;
var color = "lightgreen";
var bgcolor = "#222";
var text;
var animation_loop, redraw_loop;
function init() {
//Clear the canvas everytime a chart is drawn
ctx.clearRect(0, 0, W, H);
//Background 360 degree arc
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 30;
ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false); //you can see the arc now
ctx.stroke();
//gauge will be a simple arc
//Angle in radians = angle in degrees * PI / 180
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 30;
//the arc will start from the topmost end
ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
ctx.stroke();
//Lets add the text
ctx.fillStyle = color;
ctx.font = "50px bebas";
text = Math.floor(degrees / 360 * 100) + "%";
//Lets center the text
//deducting half of text width from position x
text_width = ctx.measureText(text).width;
//adding manual value to position y since the height of the text cannot
//be measured easily. There are hacks but we will keep it manual for now.
ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
}
function draw() {
//Cancel any movement animation if a new chart is requested
if (typeof animation_loop != undefined) clearInterval(animation_loop);
////random degree from 0 to 360
//new_degrees = Math.round(Math.random() * 360);
//difference = new_degrees - degrees;
////This will animate the gauge to new positions
////The animation will take 1 second
////time for each frame is 1sec / difference in degrees
animation_loop = setInterval(animate_to, 1000 / difference);
}
//function to make the chart move to new degrees
function animate_to() {
//clear animation loop if degrees reaches to new_degrees
if (degrees == new_degrees)
// clearInterval(animation_loop);
if (degrees < new_degrees)
degrees++;
else
degrees--;
init();
}
//add some animation
draw();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Lets make a gauge chart using canvas and js -->
<canvas id="canvas" width ="300" height="300"></canvas>
<asp:TextBox ID="TextBox1" runat="server">0</asp:TextBox>
</form>
最佳答案
可以通过querySelector()获取该值。另外，由于它是服务器端标签，因此您应该获取以 id 结尾的元素，而不是 id 本身:
var degrees = document.querySelector("[id$='TextBox1']").value;
document.querySelector("[id$='TextBox1']") //Returns the HTML-Element itself
document.querySelector("[id$='TextBox1']").value //Returns the value of the HTMLElement
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
关于javascript - 将文本框中的值放入 JavaScript 变量中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41037590/