客户端软件技术的作业,要求根据输入的数值打印出各种形状。
首先是html部分
<h1>正三角形1</h1>
<div>
<input type="text" id="side1" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
<input type="button" onclick="one()" value="点我生成三角形">
<div id="one" style="line-height: 10px;margin-top: 20px;"></div>
</div>
<h1>正三角形2</h1>
<div style="margin-top: 10px;">
<input type="text" id="side2" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
<input type="button" onclick="two()" value="点我生成正三角形">
<div id="two"></div>
</div>
<h1>直角三角形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side3" placeholder="请输入行数" style="width: 300px;">
<input type="button" onclick="three()" value="点我生成直角三角形">
<div id="three"></div>
</div>
<h1>菱形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side4" placeholder="请输入菱形的边长" style="width: 300px;">
<input type="button" onclick="four()" value="点我生成菱形">
<div id="four" style="letter-spacing: 4px;"></div>
</div>
<h1>空心菱形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side5" placeholder="请输入菱形的边长" style="width: 300px;">
<input type="button" onclick="five()" value="点我生成空心菱形">
<div id="five" style="letter-spacing: 4px;"></div>
</div>
<h1>对角线菱形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side6" placeholder="请输入菱形的边长" style="width: 300px;">
<input type="button" onclick="six()" value="点我生成对角线菱形">
<div id="six" style="letter-spacing: 4px;"></div>
</div>
效果:
正三角形:
function one() { //点击按钮触发的函数
var one = document.getElementById("one") //获取one,方便后续将三角形画在里面
var html1 = '' //定义HTML1
var side1 = document.getElementById("side1").value //获取输入的边的值
if (!side1) { //判断side1是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side1)) { //在下方的函数中判断side1是否为正整数,否则给出提示
alert("请输入正整数哦")
} else {
for (var i = 0; i < side1; i++) {
for (var j = 0; j <= i; j++) { //当j小于i时便输出
html1 += '*'
}
html1 += '<br/>'
}
one.innerHTML = html1 //将html在one中显示粗来
}
}
效果:
第二个正三角形:
function two() { //点击正三角形按钮触发的函数
var two = document.getElementById("two") //获取two,方便后续将等边三角形画在里面
var html2 = '' //定义HTML2
var side2 = document.getElementById("side2").value //获取输入的等边三角形的边的值
if (!side2) { //判断side2是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side2)) { //判断side1是否为正整数,否则给出提示
alert("请输入正整数哦")
} else {
for (var i = 0; i < side2; i++) {
for (var j = 0; j < side2 - i - 1; j++) {
html2 += ' '
}
for (var k = 0; k < i * 2 + 1; k++) {
if (k > i) { //每行只输入相应行数的*
html2 += ' '
} else {
html2 += '* '
}
}
html2 += '<br/>'
}
two.innerHTML = html2 //将html在two中显示粗来
}
}
效果:
直角三角形:
function three() { //点击直角三角形触发的函数
var three = document.getElementById("three") //获取three,方便后续将三角形画里边
var html3 = ''
var side3 = document.getElementById("side3").value //获取行数的值
if (!side3) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side3)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数哦")
} else {
for (i = 0; i < side3; i++) {
for (j = 0; j < 2 * i + 1; j++) {
html3 += '*'
}
html3 += '<br/>'
}
three.innerHTML = html3 //将html在three中显示粗来
}
}
效果:
菱形:
function four() { //点击菱形按钮触发的函数
var four = document.getElementById("four") //获取four,方便后续将图形画里边
var html4 = ''
var side4 = document.getElementById("side4").value //获取行数的值
if (!side4) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side4)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数")
} else {
for (var i = 0; i < side4; i++) { //输出正三角形
for (var j = 0; j < side4 - i - 1; j++) {
html4 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j > i) { //每行只输入相应行数的*
html4 += ' '
} else {
html4 += '* '
}
}
html4 += '<br/>';
}
for (var i = side4 - 2; i >= 0; i--) { //输出倒三角形,倒三角形最长的边应该比正三角形最长边小2
for (var j = 0; j < side4 - i - 1; j++) {
html4 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j > i) { //每行只输入相应行数的*
html4 += ' '
} else {
html4 += '* '
}
}
html4 += '<br/>';
}
four.innerHTML = html4
}
}
效果:
空心菱形:
function five() { //点击空心菱形触发的函数
var five = document.getElementById("five") //获取five,方便后续将图形画里边
var html5 = ''
var side5 = document.getElementById("side5").value //获取行数的值
if (!side5) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side5)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数")
} else {
for (var i = 0; i < side5; i++) { //输出正三角形
for (var j = 0; j < side5 - i - 1; j++) {
html5 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j == 0 || j == 2 * i) { //只在最开始和最末尾打印*
html5 += '*'
} else {
html5 += ' '
}
}
html5 += '<br/>';
}
for (var i = side5 - 2; i >= 0; i--) {
for (var j = 0; j < side5 - i - 1; j++) {
html5 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) { //同理,只在最开始和最末尾打印*
if (j == 0 || j == 2 * i) {
html5 += '*'
} else {
html5 += ' '
}
}
html5 += '<br/>'
}
five.innerHTML = html5
}
}
效果:
对角菱形:
function six() {
var six = document.getElementById("six") //获取six,方便后续将图形画里边
var html6 = ''
var side6 = document.getElementById("side6").value //获取行数的值
if (!side6) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side6)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数")
} else {
for (var i = 0; i < side6; i++) {
for (var j = 0; j < side6 - i - 1; j++) {
html6 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (i == side6 - 1 && j < side6) { //横线
html6 += '* '
} else {
if (i == side6 - 1 && j >= side6) { //排除掉横线符合下面if的条件被意外写入的情况
html6 += ' '
} else {
if (j == 0 || j == 2 * i || j == i) { //在最前端、最末尾和最中间写上*
html6 += '*'
} else {
html6 += ' '
}
}
}
}
html6 += '<br/>'
}
for (var i = side6 - 2; i >= 0; i--) {
for (var j = 0; j < side6 - i - 1; j++) {
html6 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j == 0 || j == 2 * i || j == i) {
html6 += '*'
} else {
html6 += ' '
}
}
html6 += '<br/>'
}
six.innerHTML = html6
}
}
效果:
说明:我这种方法画出来的十字不是很直,有其他方法的。
最后是自己写的判断是否是正整数的函数:
function isNum(num) { //判断传进来的数字是否是正整数
var r = /^[0-9]*[1-9][0-9]*$/ //将正则写出来
return r.test(num) //test()判断数字是否符合正则表达式
}
附上完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>正三角形1</h1>
<div>
<input type="text" id="side1" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
<input type="button" onclick="one()" value="点我生成三角形">
<div id="one" style="line-height: 10px;margin-top: 20px;"></div>
</div>
<h1>正三角形2</h1>
<div style="margin-top: 10px;">
<input type="text" id="side2" placeholder="请输入您想要的正三角形的边长度" style="width: 300px;">
<input type="button" onclick="two()" value="点我生成正三角形">
<div id="two"></div>
</div>
<h1>直角三角形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side3" placeholder="请输入行数" style="width: 300px;">
<input type="button" onclick="three()" value="点我生成直角三角形">
<div id="three"></div>
</div>
<h1>菱形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side4" placeholder="请输入菱形的边长" style="width: 300px;">
<input type="button" onclick="four()" value="点我生成菱形">
<div id="four" style="letter-spacing: 4px;"></div>
</div>
<h1>空心菱形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side5" placeholder="请输入菱形的边长" style="width: 300px;">
<input type="button" onclick="five()" value="点我生成空心菱形">
<div id="five" style="letter-spacing: 4px;"></div>
</div>
<h1>对角线菱形</h1>
<div style="margin-top: 10px;">
<input type="text" id="side6" placeholder="请输入菱形的边长" style="width: 300px;">
<input type="button" onclick="six()" value="点我生成对角线菱形">
<div id="six" style="letter-spacing: 4px;"></div>
</div>
<script>
function one() { //点击按钮触发的函数
var one = document.getElementById("one") //获取one,方便后续将三角形画在里面
var html1 = '' //定义HTML1
var side1 = document.getElementById("side1").value //获取输入的边的值
if (!side1) { //判断side1是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side1)) { //在下方的函数中判断side1是否为正整数,否则给出提示
alert("请输入正整数哦")
} else {
for (var i = 0; i < side1; i++) {
for (var j = 0; j <= i; j++) { //当j小于i时便输出
html1 += '*'
}
html1 += '<br/>'
}
one.innerHTML = html1 //将html在one中显示粗来
}
}
function two() { //点击正三角形按钮触发的函数
var two = document.getElementById("two") //获取two,方便后续将等边三角形画在里面
var html2 = '' //定义HTML2
var side2 = document.getElementById("side2").value //获取输入的等边三角形的边的值
if (!side2) { //判断side2是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side2)) { //判断side1是否为正整数,否则给出提示
alert("请输入正整数哦")
} else {
for (var i = 0; i < side2; i++) {
for (var j = 0; j < side2 - i - 1; j++) {
html2 += ' '
}
for (var k = 0; k < i * 2 + 1; k++) {
if (k > i) { //每行只输入相应行数的*
html2 += ' '
} else {
html2 += '* '
}
}
html2 += '<br/>'
}
two.innerHTML = html2 //将html在two中显示粗来
}
}
function three() { //点击直角三角形触发的函数
var three = document.getElementById("three") //获取three,方便后续将三角形画里边
var html3 = ''
var side3 = document.getElementById("side3").value //获取行数的值
if (!side3) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side3)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数哦")
} else {
for (i = 0; i < side3; i++) {
for (j = 0; j < 2 * i + 1; j++) {
html3 += '*'
}
html3 += '<br/>'
}
three.innerHTML = html3 //将html在three中显示粗来
}
}
function four() { //点击菱形按钮触发的函数
var four = document.getElementById("four") //获取four,方便后续将图形画里边
var html4 = ''
var side4 = document.getElementById("side4").value //获取行数的值
if (!side4) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side4)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数")
} else {
for (var i = 0; i < side4; i++) { //输出正三角形
for (var j = 0; j < side4 - i - 1; j++) {
html4 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j > i) { //每行只输入相应行数的*
html4 += ' '
} else {
html4 += '* '
}
}
html4 += '<br/>';
}
for (var i = side4 - 2; i >= 0; i--) { //输出倒三角形,倒三角形最长的边应该比正三角形最长边小2
for (var j = 0; j < side4 - i - 1; j++) {
html4 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j > i) { //每行只输入相应行数的*
html4 += ' '
} else {
html4 += '* '
}
}
html4 += '<br/>';
}
four.innerHTML = html4
}
}
function five() { //点击空心菱形触发的函数
var five = document.getElementById("five") //获取five,方便后续将图形画里边
var html5 = ''
var side5 = document.getElementById("side5").value //获取行数的值
if (!side5) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side5)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数")
} else {
for (var i = 0; i < side5; i++) { //输出正三角形
for (var j = 0; j < side5 - i - 1; j++) {
html5 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j == 0 || j == 2 * i) { //只在最开始和最末尾打印*
html5 += '*'
} else {
html5 += ' '
}
}
html5 += '<br/>';
}
for (var i = side5 - 2; i >= 0; i--) {
for (var j = 0; j < side5 - i - 1; j++) {
html5 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) { //同理,只在最开始和最末尾打印*
if (j == 0 || j == 2 * i) {
html5 += '*'
} else {
html5 += ' '
}
}
html5 += '<br/>'
}
five.innerHTML = html5
}
}
function six() {
var six = document.getElementById("six") //获取six,方便后续将图形画里边
var html6 = ''
var side6 = document.getElementById("side6").value //获取行数的值
if (!side6) { //判断输入框里的内容是否为空,否则给出提示
alert("请先输入哦")
} else if (!isNum(side6)) { //判断文本框的内容是否是正整数,否则给出提示
alert("请输入正整数")
} else {
for (var i = 0; i < side6; i++) {
for (var j = 0; j < side6 - i - 1; j++) {
html6 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (i == side6 - 1 && j < side6) { //横线
html6 += '* '
} else {
if (i == side6 - 1 && j >= side6) { //排除掉横线符合下面if的条件被意外写入的情况
html6 += ' '
} else {
if (j == 0 || j == 2 * i || j == i) { //在最前端、最末尾和最中间写上*
html6 += '*'
} else {
html6 += ' '
}
}
}
}
html6 += '<br/>'
}
for (var i = side6 - 2; i >= 0; i--) {
for (var j = 0; j < side6 - i - 1; j++) {
html6 += ' '
}
for (var j = 0; j < 2 * i + 1; j++) {
if (j == 0 || j == 2 * i || j == i) {
html6 += '*'
} else {
html6 += ' '
}
}
html6 += '<br/>'
}
six.innerHTML = html6
}
}
function isNum(num) { //判断传进来的数字是否是正整数
var r = /^[0-9]*[1-9][0-9]*$/ //将正则写出来
return r.test(num) //test()判断数字是否符合正则表达式
}
</script>
</body>
</html>
今天是周末,依然是与学习死磕的一天,窗户外面一片生机,温度只有十度。但学习使我快乐~⚪祝前程似锦