html5绘制动态矩形
来源：互联网 发布：m4男娃数据 编辑：程序博客网 时间：2024/05/23 13:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态矩形框</title>
<script>
var myLength = document.getElementById('Length').value;
var myWide = document.getElementById('Wide').value;
var myColor = document.getElementById('Color').value;
rangele.style.height=myLength+"px";
rangele.style.width=myWide+"px";
rangele.style.backgroundColor=myColor;
}
</script>
</head>
<body onload="">
<h1>动态矩形框</h1>
<span>矩形的长度：<input type="text" id="Length" value="50"></span><br><br>
<span>矩形的宽度：<input type="text" id="Wide" value="50"></span><br><br>
<span>矩形的颜色：<input type="text" id="Color" value="red"></span><br><br>
<button onclick="shezhi();">确定更改</button>
<hr>
<div id="rangele" style="border: 2px solid #ccc;background: red">
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态矩形框</title>
<script>
function shezhi(){
//获取输入框的值
var rangele = document.getElementById('rangele');var myLength = document.getElementById('Length').value;
var myWide = document.getElementById('Wide').value;
var myColor = document.getElementById('Color').value;
rangele.style.height=myLength+"px";
rangele.style.width=myWide+"px";
rangele.style.backgroundColor=myColor;
}
</script>
</head>
<body onload="">
<h1>动态矩形框</h1>
<span>矩形的长度：<input type="text" id="Length" value="50"></span><br><br>
<span>矩形的宽度：<input type="text" id="Wide" value="50"></span><br><br>
<span>矩形的颜色：<input type="text" id="Color" value="red"></span><br><br>
<button onclick="shezhi();">确定更改</button>
<hr>
<div id="rangele" style="border: 2px solid #ccc;background: red">
</div>
</body>
</html>
博主大学的作业，顺便上传一下，欢迎批评指点
0 0
- html5绘制动态矩形
- HTML5 Canvas: 绘制矩形
- HTML5 绘制矩形
- HTML5绘制矩形
- html5画布-绘制矩形
- html5绘制矩形
- HTML5 canvas 绘制矩形 改变矩形颜色
- html5中canvas绘制矩形
- html5<canvas>标签绘制矩形，线条，圆
- HTML5教程-用Canvas标签绘制矩形
- html5 canvas元素各种矩形的绘制
- html5 canvas 绘制圆角矩形
- HTML5中使用canvas绘制矩形
- HTML5学习笔记之使用canvas绘制矩形
- html5如何绘制矩形吗？谈下心得！
- HTML5 Canvas实现web画图之自由绘制矩形
- 【实例】html5-canvas绘制线段、矩形和圆
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- Understanding TCP/IP Network Stack & Writing Network Apps
- FastDFS与Springboot集成
- 子网寻址
- Facebook 发布新 Node 模块管理器 Yarn，或将取代 npm 客户端
- framework快速开发平台
- html5绘制动态矩形
- php 正则匹配中文及中文字符
- [Windows批处理]清除IE缓存
- 近发现了一个很诡异的NullPointerException
- Android学习路线图
- CodeForces - 731C Socks (并查集)
- Centos 6.8 svn服务器搭建
- HttpUrlConnection的setDoInput(),setDoOutput()
- JSP乱码
