<!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. 数据库日常实操优质文章分享（含Oracle、MySQL等） | 2023年2月刊

    本文为大家整理了墨天轮数据社区2023年2月发布的优质技术文章,主题涵盖Oracle.MySQL.PostgreSQL等数据库的环境搭建.故障处理等日常实践操作,以及概念梳理.常用脚本等总结记录,分享 ...

  2. 16. VUE怎么阻止冒泡

    给事件添加 stop 修饰符 ,比如 click.stop  ; 补充: 阻止默认行为 prevent 修饰符 ,超链接的跳转,表单的默认提交 : once 修饰符 事件只触发一次 ps:事件修饰符可 ...

  3. 【Azure Cloud Service】使用RESTAPI更新Cloud Service(Extended Support) 中所配置的证书

    问题描述 当根据Cloud Service (Extended Support) 文档更新证书 ( https://docs.azure.cn/zh-cn/cloud-services-extende ...

  4. HttpUtils 详解

    一.详解 1.1 介绍 现如今的 Web 项目,由服务端向外发起网络请求的场景,基本上随处可见! 传统情况下,在服务端代码里访问 http 服务时,一般会使用 JDK 的 HttpURLConnect ...

  5. （超全）Python汇总篇，200+Python标准库介绍

    关于Python标准库 众所周知,Python是一个依赖强大的组件库完成对应功能的语言,为了便捷实现各项功能,前辈大牛们打造了多种多样的工具库公开提供给大众使用,而越来越多的库已经因为使用的广泛和普遍 ...

  6. ROS入门21讲(7)

    十二.launch启动文件的使用方法 1.launch文件:通过XML文件实现多节点的配置和启动(可自动启动ROS Master) 2.Launch文件语法: <launch> <n ...

  7. LookupViT：类似SE的token压缩方案，加速还能丰富特征 | ECCV'24

    视觉变换器(ViT)已成为众多工业级视觉解决方案的事实标准选择.但由于每一层都计算自注意力,这导致其推理成本对许多场景而言是不可接受的,因为自注意力在标记数量上具有平方的计算复杂度.另一方面,图像中的 ...

  8. centos7LDAP服务搭建

    ladp服务搭建 用户名:cn=admin,dc=test,dc=com 密码:123456 1)软件安装yum install openldap openldap-clients openldap- ...

  9. 基于XAML框架和跨平台项目架构设计的深入技术分析

    XAML平台和跨平台开发策略 本文基于Vicky&James 2024年10月22日在韩国Microsoft总部BMW meetup会议上的演讲内容重新整理而成.这次研讨会我们深入探讨了基于X ...

  10. 使用Boost.asio与Boost.beast基于协程连接ws

    目录 目录 前言 准备工作 实现 初始化io_context并监听信号 启动连接ws的线程并启动io_context 建立tcp链接(以下步骤皆位于ws函数中) ws握手 传输数据 效果 总结 前言 ...