<!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. `->` 操作符重载的注意事项

    在 C++ 中,-> 操作符可以被重载,用于对象的指针成员访问. 重载后的 -> 操作符主要用于模拟指针访问行为,常见于智能指针的实现等复杂场景. -> 操作符重载后的调用触发流程: ...

  2. placement new --特殊的内存分配

    placement new 是 C++ 中的一种特殊的内存分配技术,用来在指定的内存地址上直接构造对象.与普通的 new 运算符不同,placement new 并不分配新的内存,而是在已经分配好的内 ...

  3. 一个SMMU内存访问异常的问题

    最近碰到棘手的问题: 以太网进行iperf测试时, 发生了SMMU (System Memory Management Unit)访问异常导致内核崩溃. 原本只是内部测试发现, 后面在试验车上也概率性 ...

  4. 15. Vue 数据双向绑定原理

    在初始化 Vue 实例的时候,会遍历data中的数据,通过 Object.defineProperty 给数据添加 getter 和 setter 函数 ,获取数据触发 getter 函数 ,修改数据 ...

  5. FFmpeg开发笔记（五十六）使用Media3的Exoplayer播放网络视频

    ​Android早期的MediaPlayer控件对于网络视频的兼容性很差,所以后来单独推出了Exoplayer库增强支持网络视频,在<Android Studio开发实战:从零基础到App上线( ...

  6. 为Markdown/HTML文档生成一个简易目录

    现在阅览文章的网页往往都带有一个目录,方便点击跳转.目录一般都是根据文档中的标题级别直接生成的. 现在我们也来模仿一个简单的,无非就是把<h1><h2>...的序列转化成树嘛 ...

  7. Machine Learning Week_1 Model and Cost Function 5-8

    目录 2.5 Video: Cost Function Intuition-1 unfamiliar words 2.6 Reading: Cost Function Intuition-1 unfa ...

  8. AI五子棋_09 消息循环实现自动对局

    AI五子棋 第九步 恭喜你到达第九步! 上一步我们已经完成了一个AI大脑的最核心功能.我们可以用它来对战了. 访问服务器 http://202.207.12.156:9012/join_game,会返 ...

  9. Large Language Model主题的若干论文简述

    1. Architectural Components of Large Language Models (LLMs) SentencePiece: A simple and language ind ...

  10. 基于Java+SpringBoot心理测评心理测试系统功能实现四

    一.前言介绍: 1.1 项目摘要 心理测评和心理测试系统在当代社会中扮演着越来越重要的角色.随着心理健康问题日益受到重视,心理测评和心理测试系统作为评估个体心理状态.诊断心理问题.制定心理治疗方案的工 ...