<!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>

【前端】【JavaScript】通过成绩判断等级的更多相关文章

  1. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  2. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  3. Fundebug前端JavaScript插件更新至1.2.0

    摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...

  4. OpenJudge计算概论-成绩判断

    /*========================================================= 成绩判断 总时间限制: 1000ms 内存限制: 6000kB 描述 输入一个0 ...

  5. 详解升讯威在线客服系统前端 JavaScript 脚本加密技术（1）

    我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 这段时间有几个技术小伙伴问了我一个有意思的问题:"你的前端脚本是 ...

  6. JavaScript根据文件名判断文件类型

    //JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...

  7. 【跟着子迟品 underscore】JavaScript 中如何判断两个元素是否 "相同"

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  8. 前端JavaScript规范

    前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...

  9. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  10. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

随机推荐

  1. go 使用websocket

    package chat import ( "encoding/json" "github.com/gorilla/websocket" "githu ...

  2. excel江湖异闻录--Klaus

    最开始接触数组公式,是偶然在公众号看到"看见星光"大佬的一个提取混合文本中电话号码的公式,记得当时大佬是用vlookup解的这题,当时完全不能理解,mid中第二参数为什么是个row ...

  3. duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

    duxui是duxapp官方开发的一款兼容多端的UI组件库,兼容小程序.H5.React Native,库中提供了60+的组件,覆盖大部分使用场景 它能帮助你通过统一的组件样式,快速完成多端应用的开发 ...

  4. C# 的显示转换 *.Parse(string) Convert.ToInt32(double value)

    // 显式转换 (类型) /// (int)表示使用强制的显示转换,是一种类型转换,C#默认的整形是 int32 , /// 因此使用此方法转成int32 不遵循四舍五入,直截取整数部分 /// (i ...

  5. 00 通过 Pytorch 实现 Transformer 框架完整代码

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  6. KubeSphere 社区双周报 | Fluent Operator 2.6.0 发布 | 2023.11.10-11.23

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...

  7. Linux系统管理-yum源配置

    一.本地光盘yum源配置 1.创建挂载点 [root@localhost ~]# mkdir /mnt/cdrom 2.配置自动挂载本地光盘 [root@localhost ~]# vim /etc/ ...

  8. css动画效果（边框线条流动效果）

    1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6FxrVbiamfvb7b0H4qcDzZRwq3PqvXfuMDaPZ44VUic1h2WR ...

  9. Go语言编写单元测试用例

    Go单元测试示例 example/ |--division.go |--division_test.go 为什么被测试文件和测试文件通常放到同一个文件夹下以及同一个声明包里 通常情况下,我们把被测试的 ...

  10. 【Azure App Service】在App Service for Windows上验证能占用的内存最大值

    问题描述 在创建App Service服务的时候,根据定价层不同,内存使用的最大值也有不同.但在实际测试中,发现内存最大只能占用2GB左右, 而定价层中内存分配明明是大于2GB(比如B3定价层的内存为 ...