在html运行的 JS 将function handIn（） { var total = 0; //遍历答题卡和答案 for （var i = 0; i < answers.length; i++） { if （answers[i].toLowerCase（） === keys[i]） { total = total + Number（p[i].score）; } }} alert（'你的得分是：' + total）;的total储存到localStorage的一个数组，并且html点击一个查询按钮将从localStorage中获取数组并将每个total得分添加到html的得分的文本框中，把每次total得分的序号显示第几次文本框，html点击一个查询将的html和js代码，用简体中文

时间: 2024-03-21 07:39:01 浏览: 54

以下是实现的 HTML 代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>得分查询</title> </head> <body> <h1>得分查询</h1> <button onclick="showScores()">查询</button> <div id="scores"></div> <script> // 设置存储的键名为 "scores" const scoresKey = "scores"; // 定义 handIn 函数 function handIn() { var total = 0; // 遍历答题卡和答案 for (var i = 0; i < answers.length; i++) { if (answers[i].toLowerCase() === keys[i]) { total = total + Number(p[i].score); } } // 从 localStorage 中获取之前的得分数组，如果不存在则创建一个空数组 var scores = JSON.parse(localStorage.getItem(scoresKey)) || []; // 将新的得分加入数组 scores.push(total); // 将数组存储回 localStorage 中 localStorage.setItem(scoresKey, JSON.stringify(scores)); alert('你的得分是：' + total); } // 定义显示得分函数 function showScores() { // 从 localStorage 中获取之前的得分数组，如果不存在则创建一个空数组 var scores = JSON.parse(localStorage.getItem(scoresKey)) || []; // 获取得分显示区域的元素 var scoresDiv = document.getElementById("scores"); // 清空得分显示区域的内容 scoresDiv.innerHTML = ""; // 遍历得分数组，将每次得分添加到得分显示区域中 for (var i = 0; i < scores.length; i++) { var scoreSpan = document.createElement("span"); scoreSpan.innerText = "第 " + (i+1) + " 次得分为：" + scores[i] + " 分。"; scoresDiv.appendChild(scoreSpan); } } </script> </body> </html> ``` 其中，`handIn` 函数会在用户提交答案时调用，将得分加入一个存储在 `localStorage` 中的数组中。`showScores` 函数会在用户点击查询按钮时调用，从 `localStorage` 中获取之前的得分数组，并将每次得分添加到 HTML 页面中显示。需要注意的是，由于 `localStorage` 中只能存储字符串类型的数据，所以在存储和读取数组时需要使用 `JSON.stringify` 和 `JSON.parse` 进行转换。

阅读全文

相关推荐

在Z-Blog中运行代码[html][/html]（纯JS版）

JS使用for循环遍历Table的所有单元格内容

JavaScript中“过于”犀利地for/in循环使用示例

软考论文范例解读：信息系统项目管理与设计方法的应用

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档 .zip

Go语言简易指令树实现.zip

基于java的新生报到系统的开题报告.docx

基于爬虫的web漏洞扫描器详细文档+资料齐全.zip

k8s上部署openvpn

Vue框架开发指南：从基础到高级应用

inode SvpnClient.exe windows

2024广联达提示盗版文件被锁解锁工具.zip

java课程设计-拼图游戏.zip学习资源

过腾讯易语言版本.zip

mysql8.0.635466323

基于java的校园车辆管理系统设计与实现.docx

基于flask的图书管理系统支持电子书下载及纸质书的管理资料齐全+详细文档.zip

最新推荐

微信小程序中为什么使用var that=this

javascript遍历json对象的key和任意js对象属性实例

全面解析JavaScript里的循环方法之forEach，for-in，for-of

两种方法实现在HTML页面加载完毕后运行某个js

在html的img src=""中调用js函数或js变量来动态指定图片路径

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能