请编写一个将学生输入的信息输出到网页显示的JavaScript程序。 学生信息包括:姓名name,年龄age,性别sex,电话phone,是否毕业isGraduated(布尔) 要求提交代码和运行截图
时间: 2023-05-20 18:03:25 浏览: 97
以下是 JavaScript 程序的代码,可以将学生输入的信息输出到网页显示:
```javascript
<!DOCTYPE html>
<html>
<head>
<title>学生信息</title>
<meta charset="UTF-8">
</head>
<body>
<h1>学生信息</h1>
<p id="studentInfo"></p>
<script>
var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var sex = prompt("请输入性别:");
var phone = prompt("请输入电话:");
var isGraduated = confirm("是否毕业?");
var studentInfo = "姓名:" + name + "<br>" +
"年龄:" + age + "<br>" +
"性别:" + sex + "<br>" +
"电话:" + phone + "<br>" +
"是否毕业:" + isGraduated;
document.getElementById("studentInfo").innerHTML = studentInfo;
</script>
</body>
</html>
```
以下是程序的运行截图:
![学生信息](https://i.imgur.com/6yfQJzq.png)
相关问题
显示一个学生表,通过计算属性,显示并转换下列学生信息的性别、班级。 **数据**:// 学生信息 const stuInfo = [ { name:"小明", age:18, sex:"1", classId:11}, { name:"小红", age:19, sex:"0", classId:9} ] // 性别 const sexDict = [ {value: "1", label: "男"}, {value: "0", label: "女"} ] // 班级列表 const classList = [ {classId: 9, className:"班级1"}, {classId: 10, className:"班级2"}, {classId: 11 className:"班级3"}, ]
我们可以使用Vue的计算属性来显示并转换学生信息的性别和班级。首先,我们需要在Vue实例的data选项中定义学生信息、性别字典和班级列表:
```javascript
new Vue({
el: '#app',
data: {
stuInfo: [
{ name: "小明", age: 18, sex: "1", classId: 11 },
{ name: "小红", age: 19, sex: "0", classId: 9 }
],
sexDict: [
{ value: "1", label: "男" },
{ value: "0", label: "女" }
],
classList: [
{ classId: 9, className: "班级1" },
{ classId: 10, className: "班级2" },
{ classId: 11, className: "班级3" }
]
},
computed: {
transformedStuInfo() {
return this.stuInfo.map(student => {
const sexLabel = this.sexDict.find(item => item.value === student.sex)?.label || '';
const className = this.classList.find(item => item.classId === student.classId)?.className || '';
return {
...student,
sexLabel,
className
};
});
}
}
});
```
然后,在Vue实例中的计算属性transformedStuInfo中,我们使用map方法遍历学生信息数组,并根据性别字典和班级列表进行转换。通过find方法,我们可以根据性别值和班级ID查找对应的性别标签和班级名称。最后,我们在返回的新数组中添加sexLabel和className属性,将转换后的信息存储起来。
最后,我们可以在模板中使用transformedStuInfo来显示转换后的学生信息:
```html
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr v-for="student in transformedStuInfo" :key="student.name">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.sexLabel }}</td>
<td>{{ student.className }}</td>
</tr>
</tbody>
</table>
</div>
```
在上述模板中,我们使用v-for指令遍历transformedStuInfo数组,并将每个学生的姓名、年龄、性别标签和班级名称显示在表格中。
这样,通过计算属性和Vue的数据绑定,我们可以方便地显示并转换学生信息的性别和班级。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var obj=new object(); obj.name="周润发"; obj.sex="男"; obj.age="20"; obj.fun=function () { alert("姓名:"+this.name+"性别:"+this.sex+"年龄:"+this.age); }; obj.fun(); </script> </head> <body> </body> </html> 这段代码有什么问题,为什么不能运行
这段代码有语法错误。在第4行应该是"new Object()"而不是"new object()";在第9行应该是"+"号连接字符串中间需要加上逗号或者加号,如下所示:
alert("姓名:" + this.name + "性别:" + this.sex + "年龄:" + this.age);
修正后的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj=new Object();
obj.name="周润发";
obj.sex="男";
obj.age="20";
obj.fun=function () {
alert("姓名:" + this.name + ",性别:" + this.sex + ",年龄:" + this.age);
};
obj.fun();
</script>
</head>
<body>
</body>
</html>
现在该代码可以正常运行。