【前端】【JavaScript】通过成绩判断等级

简介: 【前端】【JavaScript】通过成绩判断等级


q1.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label for="num">成绩:</label><input type="number" placeholder="请输入数字" id="num">
<input type="button" onclick="check()" value="检查">
<p id="result"></p>
<script>
function  check() {
  //结果输出标签
    result = document.getElementById("result")
  //控件方式输入
    let num = document.getElementById("num").value;
    if (num === undefined || num === "") {
        //弹窗方式输入
        num = prompt("输入数字");
    }
  if (num===""){
    alert("请输入0-100的茄子。")
    return false;
  }
  if(num>100 || num<0){
    alert("非法数字,请输入1-100的茄子。")
    return false;
  }
  switch (parseInt(num / 10)) {
    case 10:
    case 9:
      alert("优秀");
      result.innerHTML="<font color='blue'>优秀</font>"
      break;
    case 8:
      alert("良好");
      result.innerHTML="<font color='#8a2be2'>良好</font>"
      break;
    case 7:
      alert("中等");
      result.innerHTML="<font color='#9acd32'>中等</font>"
      break;
    case 6:
      alert("及格");
      result.innerHTML="<font color='yellow'>及格</font>"
      break;
    case 5:
    case 4:
    case 3:
    case 2:
    case 1:
    case 0:
      alert("不及格");
      result.innerHTML="<font color='red'>不及格</font>"
      break;
    default:
      alert("不合法的数字");
  }
}
</script>
</body>
</html>
相关文章
|
9天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
17天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
32 4
|
11天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
146 0
|
1月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
58 0
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
37 0
|
1月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
22 0
|
1月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
34 0
|
1月前
|
Web App开发 JavaScript 前端开发
【前端基础篇】JavaScript基础介绍
【前端基础篇】JavaScript基础介绍
15 0
下一篇
无影云桌面