使用JAVASCRIPT脚本在页面根据用户输入数来输出一个正方形
时间: 2024-09-26 10:17:35 浏览: 27
在JavaScript中,你可以通过监听用户的输入事件,然后动态创建HTML元素来实现这个功能。以下是一个简单的示例:
```javascript
// 获取页面上的用于输入数字的元素
var inputElement = document.getElementById('input-square');
// 监听输入框的改变事件
inputElement.addEventListener('change', function() {
// 从输入框获取用户输入的值
var size = parseInt(this.value); // 将字符串转换成整数
// 检查输入是否有效
if (isNaN(size) || size < 1) {
alert('请输入一个大于0的整数!');
return;
}
// 创建一个新的div,并设置宽度和高度为用户输入的大小
var squareDiv = document.createElement('div');
squareDiv.style.width = size + 'px';
squareDiv.style.height = size + 'px';
// 设置div的背景色或其他样式,这里以黑色为例
squareDiv.style.backgroundColor = 'black';
// 将新创建的div添加到页面上,例如body
document.body.appendChild(squareDiv);
});