<!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. ARM64中的ASID地址空间标识符

    1. 从ARM32到ARM64 从ARM32到ARM64不止将处理器从32位升级到了64位,还有许多性能的技术也得到了极大的提升,光是个头长了可不行啊!能耐也得跟着长啊!哈哈哈 1.1 ARM32的T ...

  2. npy转换为png和nii文件

    #coding:utf-8 import matplotlib.pyplot as plt import numpy as np import os from skimage.transform im ...

  3. iOS关于列表布局的几种实现方式小结

    最近在项目开发中,遇到了常见的列表布局样式,功能的要求是最多六行,动态展示.当时想到的方案是,抽象出一个cell,初始化六个标签,动态的控制显示和隐藏,这样功能上没有问题,就是代码有些冗余.请教了身边 ...

  4. C#查漏补缺----Exception处理实现，无脑抛异常不可取

    前言 环境:.NET 8.0 系统:Windows11 参考资料:CLR via C#, .Net Core底层入门 https://andreabergia.com/blog/2023/05/err ...

  5. python中的时间处理

    python程序编写中的时间处理涉及三种: 1.时间的显示: 2.时间的转换: 3.时间的运算. 时间处理模块:time模块 时间的三种表示方式: ①时间戳,从1970年1月1日开始,每过1s增加1, ...

  6. Qunar 云原生容器化落地实践

    作者|邹晟 去哪儿网基础平台技术专家 背景 近几年,云原生和容器技术非常火爆,且日趋成熟,众多企业慢慢开始容器化建设,并在云原生技术方向上不断的探索和实践.基于这个大的趋势, 2020 年底 Quna ...

  7. 云原生周刊：开发人员使用 GPT-4 的 30 种重要方法 | 2023-6-5

    OpenAI 最新的大型语言模型 GPT-4 有非常多的用途,那么,作为开发人员,应该如何去使用它,来帮助自己工作呢? 在最近的 Hacker News 问答中,很多开发人员参与了讨论和分享. 也有人 ...

  8. EAFP 与 LBYL 风格

    EAFP 与 LBYL 是两种"防御性处理机制",相信你一定接触过,只是可能没有深入思考过这个问题. 输入两个数,要输出相除后的结果: a, b = map(int, input( ...

  9. 让性能提升56%的Vue3.5响应式重构之“版本计数”

    前言 Vue3.5响应式重构主要分为两部分:双向链表和版本计数.在上一篇文章中我们讲了 双向链表 ,这篇文章我们接着来讲版本计数. 欧阳年底也要毕业了,加入欧阳的面试交流群(分享内推信息).高质量vu ...

  10. 基于Java+SpringBoot+Mysql实现的古诗词平台功能设计与实现五

    一.前言介绍: 1.1 项目摘要 随着信息技术的迅猛发展和数字化时代的到来,传统文化与现代科技的融合已成为一种趋势.古诗词作为中华民族的文化瑰宝,具有深厚的历史底蕴和独特的艺术魅力.然而,在现代社会中 ...