!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
}
#res {
margin-top:20px;
width: 300px;
min-height: 100px;
padding: 10px;
border:1px solid #ccc;
}

</style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<h3>请输入您的成绩:</h3>
<input type="number" id="score">
<button onclick="makeScore()">提交</button>

<div id="res"></div>

<script>
//声明函数
function makeScore() {
//获取用户输入的成绩
var score = Number(document.getElementById('score').value);

//对成绩进行判断
var resContent = ''; //空字符串 声明定义 变量
if (score >= 90) {
resContent = '不错哦,小同志,很优秀'; //修改变量的值
} else if (score >= 80) {
resContent = '小同志,还行';
} else if (score >= 60) {
resContent = '小同志,及格了';
} else {
resContent = '你不是我的同志';
}

//把结果写入到div中 id=res
document.getElementById('res').innerHTML = resContent;

}

</script>
</body>
</html>

最新文章

  1. 安装mcrypt
  2. MySQL(五) MySQL中的索引详讲
  3. varchar和Nvarchar区别
  4. 基于jquery的相册预览gallery
  5. tomcat+nginx+redis实现均衡负载、session共享(二)
  6. spring-security 登陆认证之初次探究
  7. ios模拟器安装.app
  8. apache故障处理
  9. LNMP状态管理命令
  10. 常用的Arrays类和二维数组以及二分法的介绍
  11. js数组遍历方法总结
  12. 产生 unmerge path git
  13. 洛谷P4556 雨天的尾巴 线段树
  14. mysql 去除字符串中前后空格
  15. 每月IT摘录201901
  16. openstack部署心得
  17. 让360双核浏览器默认极速模式,避免采用IE模式无法正常访问html5网页的解决办法
  18. 使用ntpdate校正linux系统的时间
  19. MiniUi-----Spinner 数值调节器(可以实现任意值的递增)
  20. linux系统时间同步,硬件时钟和系统时间同步,时区的设置

热门文章

  1. Java基本的程序结构设计 控制流程
  2. 40 final、finally、finalize的区别
  3. 【leetcode】1228.Missing Number In Arithmetic Progression
  4. 【leetcode】Valid Palindrome II
  5. json.load(f)方法使用*.json备忘
  6. 5. ClustrixDB SQL语法
  7. WEB上传大文件
  8. CodeForces 1200E Compress Words
  9. Python3学习笔记(七):字典
  10. Spring Data Jpa (二)JPA基础查询