性别判断
时间：2023-3-10 14:30 作者：小诸葛 分类： JavaScript 正在检查是否收录...
代码
<!-- 2. 编程题：定义变量gender保存性别，再使用if语句进行判断。如果是男，
在网页中输出“先生你好”，如果是女，在网页中输出“小姐你好”。（考点：if分支语句） -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.name{
box-shadow: 0px 1px 4px #000000;
border-radius: 15px;
text-align: center;
font-size: 20px;
width: 300px;
margin: 20px auto;
background-color: #55aaff;
}
input{
margin-top: 15px;
width: 210px;
height: 30px;
background-color: #ffffff;
border: 0;
box-sizing: border-box;
padding: 0 15px;
box-shadow: inset 0px 1px 4px #000000;
outline-color: #ffffff;
}
button{
font-size: 20px;
width: 150px;
height: 40px;
border: 0;
background-color: #ffffff;
margin-bottom: 15px;
box-shadow: 0px 1px 4px #000000;
outline-color: #ffffff;
}
button:hover{
box-shadow: inset 0px 1px 4px #ffffff;
}
button:active{
box-shadow: inset 0px 1px 4px #000000;
}
span{
text-align: center;
margin: 0 auto;
width: 150px;
height: 30px;
line-height: 30px;
line: height;: 30px;
background-color:#fff;
display: block;
box-shadow: inset 0px 1px 4px #000000;
}
</style>
</head>
<body>
<div class="name">
<p style="color: #fff; font-weight: bold;">性别：<input type="text" id="gender" placeholder="请输入性别" ></p>
<p><span id="name" ></span></p>
<p><button onclick="log()">注册</button></p>
</div>
<script>
function log(){
//console.log("绑定按钮测试")
if (gender.value === "男"){
document.getElementById("name").innerHTML = "先生您好";
console.log("先生您好")
}
else if(gender.value === "女"){
document.getElementById("name").innerHTML = "女士您好";
console.log("女士您好")
}
else{
alert("请输入性别");
gender.value=""
}
}
/*let man = "先生您好";
let lady = "女士您好";
let gender ="男"
if (gender === "男"){
document.write(man)
}
else if(gender === "女"){
document.write(lady)
}*/
</script>
</body>
</html>推荐阅读：
扫描二维码，在手机上阅读