制作一个网页背单词系统

最新推荐文章于 2024-05-11 22:48:02 发布

HMLTFan

最新推荐文章于 2024-05-11 22:48:02 发布

阅读量4.1k

点赞数 8

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_42763682/article/details/104518010

版权

该博客介绍了一个使用jQuery和HTML制作的背单词系统，作者从他人博客获取灵感并托管于GitHub。系统通过解析XML存储单词，随机排序，并实现了在线发音功能。此外，作者还对原版进行了多项改进，如限制单词上限、删除作弊机制等。文章分享了代码实现，并表达了对潜在用户的期待。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

灵感来自浩子同学的博客并且照搬了源代码目前已托管至GitHub对外发布直接测试：GitHub Pages

大致介绍一下系统使用jQuery+HTML 单词本使用xml文件

标签格式：

<wordbook>
    <item>
        <word>单词</word>
        <trans><![CDATA[翻译]]></trans>
    </item>
</wordbook>

加载后系统会解析xml并存储到数组中再随机排序数组不过有一个坏处单词是无限加载的 js基础不多的我开始了摸索之路

更改：

1.删除了cokkie 防止作弊

2.增加了单词上限默写完成自动停止

3.调用有道接口实现了在线发音

4.删除了实时的正误判断

5.删除了已经不需要的更新按钮、操作说明

6.“帮助”按钮修改文案为“提示”并且设置只提示两个字母

7.输入错误后完整提示1秒

8.提示计数器

等等...

这对于我这个js小白是个大难题也花了我一周左右的时间话不多说上图上码

PS：样式是Wordpress主题自带的

HTML布局部分：

<div id="main" style="text-align: center">
	<select id="unit">
		<!-- 可以自行修改或删除 -->
		<option value="test">
			测试
		</option>
		<option value="unit">
			Unit
		</option>
	</select>
	<div style="margin: auto">
		<span id="hint">
		</span>
		<image id="play" style="margin-left: 5px" src="play.png">
			<!-- 该资源文件我会上传 -->
		</image>
	</div>
	<div style="margin: auto margin-bottom: 10px">
		<span id="notice" style="float: left">
		</span>
		<span id="result" style="float: right">
		</span>
	</div>
	<input type="text" id="text" autocomplete="off">
	<button type="button" id="help" style="margin-top: 5px">
		提示（0次）
	</button>
	<br />
	<span id="version" style="float: right">
</div>

js代码部分（前面多了一个缩进）：

	$(function() {
		var version = "1.1.0"  //版本
		var versionS = "release"  //版本
		memorize_words("test", true)  //加载代号为"test"的单词并且声明这是测试单词本（由于测试单词本文件名结构不一样 且只有3个单词 所以称为测试）
		$("#version").text(v