Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<span>请输入一个整数: </span><input type="text" id="num"/>
<input type="button" id="isnum" value="判断" οnclick="panduan()" />
<div id="result"></div>
</div>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
#box{
width: 30%;
margin: 200px auto;
text-align: center;
}
#result{
margin-top: 20px;
}
Js部分
function panduan() {
// 获取文本框的值
var num = document.getElementById('num').value;
// 获取按钮
var isnum = document.getElementById('isnum');
// 获取输出显示的盒子
var result = document.getElementById('result');
if (!isNaN(num)) {
//将num类型转换为整数
num = parseInt(num);
//判断是奇数还是偶数
if (num % 2 == 0) {
// 为偶数时将输出显示结果的颜色为绿色并输出显示
result.style.color = "green";
result.innerText = num + "为偶数";
} else {
// 为奇数时将输出显示结果的颜色为艳绿色并输出显示
result.style.color = "springgreen";
result.innerText = num + "为奇数";
}
} else {
// 文本框中值不是数字时颜色为红色并输出"你输入的不是数字！！!"
result.style.color = "red";
result.innerText = "你输入的不是数字！！!";
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
