HTML&CSS实训(网页练题系统)

简介: 这是一个基于HTML和css的一些技术创建的一个简单网页实训练题系统本章用到的资源我已经打包上传到https://download.csdn.ne直接点击下载即可或者在评论留言,我看到后将会第一时间把资源私信给你解压压缩包后直接双击网页入口,打开方式 任意浏览器​​​​​​​ 用户密码验证...


目录

前言

编辑

自动批改并计算做对的题目编辑

源码

全局颜色配置

批改源码


前言

这是一个基于HTML和css的一些技术创建的一个简单网页实训练题系统

本章用到的资源我已经打包上传到https://download.csdn.ne直接点击下载即可

或者在评论留言,我看到后将会第一时间把资源私信给你


解压压缩包后直接双击网页入口,打开方式 任意浏览器image.gif

打开后左边是我们的任务栏,点击响应的选项即可跳到对应的页面中去

image.gif

image.gif

自动批改并计算做对的题目

在选项都选择好后,点击查看成绩,此时就会自动批改,并在每题下面提示我们的选项正确还是错误 ,计算出我们总共答对的题

image.gif

源码

这是一个js文件,可以在这里更改我们题目的标题,选项,以及正确答案

这里正确答案统一value =“t”

image.gif

全局颜色配置

这里配置着我们练题网页的背景颜色,选择框的渐变颜色 ,可以根据自己的喜好自己定义

image.gif

批改源码

image.gif

用户密码验证

此处的用户姓名密码验证我没有用,有需要的可以自行加入

function bdyz(){
var xm=document.forms["bd"]["xm"].value;//获取输入的姓名
var mm=document.forms["bd"]["mm"].value;//获取输入的密码
console.log(xm);
console.log(mm);
// 判断输入姓名和密码是否正确
if(xm=="123" && mm=="123"){
alert("xm mm zq");//弹出警告框
return true;
  }
    else{
    alert("xm huo mm cw");
    return false;
    }
}

image.gif


目录
相关文章
|
6天前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
6天前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
6天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
6天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
6天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
|
6天前
|
存储 文字识别 前端开发
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
下一篇
无影云桌面