制作一个网页背单词系统

灵感来自浩子同学的博客并且照搬了源代码目前已托管至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(versionS + " " +version)  //显示版本信息$("#unit").off("change").on("change",  //下拉框的监听事件function() {var selected = $(this).children('option:selected').val()  //选中项if (selected == "test") {memorize_words(selected, true)  //加载单词并声明正加载测试单词本} else {memorize_words(selected, false)  //加载普通单词}}) function memorize_words(units, test) {var words = new Array() var words_index = 0var value_index = 0var isOK = falsevar rightcount = 0var allcount = 0var helpcount = 0 $("#help").html("提示（0次）") //初始化function randomsort(a, b) {return Math.random() > .5 ? -1 : 1  //随机排序}if (test == true) {var unit_xml = 测试单词本目录} else {var unit_xml = 普通单词本目录}//记得修改目录 也可以移除不需要的部分$.ajax({url: unit_xml,dataType: 'xml',type: 'GET',timeout: 2000,success: function(data) {$(data).find("item").each(function(index) {var name = $(this).find("word").html() var trans = $(this).find("trans").html() var notice = trans.substring(9, trans.length - 3) words[index] = {'name': name,'notice': notice}}) //寻找数据和加入数组words.sort(randomsort)  //随机排序（指调用上面函数）allcount = words.length  //将所有单词数量设为words数组的长度$("#hint").html(words[words_index].notice)  //设置显示单词中文$("#result").html("" + rightcount + "/" + allcount)  //设置进度指示器}}) function update() {isOK = false  //将是否正确设为falsewords_index++  //将单词索引自增 与下方代码可以优化$("#hint").html(words[words_index].notice)  //设置显示单词中文$("#text").val("")  $("#notice").html("")//将部分文案清空$("#result").html("" + rightcount + "/" + allcount)  //更新进度指示器}$("#text").off("input").on("input",  //输入事件function() {var hint = $("#hint").html()  //获取中文显示位置的文本（用于检测是否默写完成 可以使用变量优化）$("#notice").html("")  //将左下角提示清空if (hint == "<font color=\"green\">恭喜你 默写完成</font>") {} else {var value = words[words_index].name.trim()value = value.toLowerCase() if ($("#text").val().toLowerCase().trim() == value) {isOK = true} else {isOK = false}//判断正误}}) $("#text").off("keydown").on("keydown",function(e) {if (e.keyCode == 13) {  //按下回车事件if (isOK == false) {$("#notice").html("<font color='red'>请输入正确的单词：" + words[words_index].name + "</font>")$("#help").html("提示（" + ++helpcount + "次）")$("#text").val("")setTimeout(function() {$("#notice").html("")},1000)//输入错误} else {setTimeout(function() {rightcount++if (rightcount >= allcount) {$("#text").val("") $("#result").html("") $("#notice").html("") $("#help").html("统计") $("#hint").html("<font color='green'>恭喜你 默写完成</font>")} else {update()}},100)//输入正确}}}) $("#help").off("click").on("click",  //提示按钮点击事件function() {if (rightcount < allcount) {  //这也是判断是否默写完成的方法...才发现我的代码这么不统一规范if(versionS == "release") {$("#notice").html(words[words_index].name.substring(0, 2))  //1} else {$("#notice").html(words[words_index].name)  //2}//判断是否是正式版本并且执行1.提示两字母 2.全部提示$("#help").html("提示（" + ++helpcount + "次）")} else {alert("共默写" + allcount + "个单词 共提示" + helpcount + "次")  //可以增加其他内容如用时}})$("#play").off("click").on("click",  //点击喇叭事件function() {if (rightcount < allcount) {var audio = new Audio("http://dict.youdao.com/speech?audio=" + words[words_index].name)audio.play()} else {var audio = new Audio("win.mp3")  //该资源文件我会上传audio.play()}})}})

完整代码：

<!--单词默写系统原作者：见博文修改者：小番茄我的世界为了尊重原作者 暂不提供修改者联系方式 提供博客地址：https://blog.csdn.net/qq_42763682可以通过博客询问联系方式修改内容：见博文所有注释都是我重新看一遍代码完成的 在不熟悉语言和原作者代码的情况下修改代码真的很辛苦 我也没有能力独自完成
--><script type="text/javascript" src="/jquery.js"><!-- 自行下载jQuery -->
</script>
<script type="text/javascript">$(function() {var version = "1.1.0"  //版本var versionS = "release"  //版本memorize_words("test", true)  //加载代号为"test"的单词并且声明这是测试单词本（由于测试单词本文件名结构不一样 且只有3个单词 所以称为测试）$("#version").text(versionS + " " +version)  //显示版本信息$("#unit").off("change").on("change",  //下拉框的监听事件function() {var selected = $(this).children('option:selected').val()  //选中项if (selected == "test") {memorize_words(selected, true)  //加载单词并声明正加载测试单词本} else {memorize_words(selected, false)  //加载普通单词}}) function memorize_words(units, test) {var words = new Array() var words_index = 0var value_index = 0var isOK = falsevar rightcount = 0var allcount = 0var helpcount = 0 $("#help").html("提示（0次）") //初始化function randomsort(a, b) {return Math.random() > .5 ? -1 : 1  //随机排序}if (test == true) {var unit_xml = 测试单词本目录} else {var unit_xml = 普通单词本目录}//记得修改目录 也可以移除不需要的部分$.ajax({url: unit_xml,dataType: 'xml',type: 'GET',timeout: 2000,success: function(data) {$(data).find("item").each(function(index) {var name = $(this).find("word").html() var trans = $(this).find("trans").html() var notice = trans.substring(9, trans.length - 3) words[index] = {'name': name,'notice': notice}}) //寻找数据和加入数组words.sort(randomsort)  //随机排序（指调用上面函数）allcount = words.length  //将所有单词数量设为words数组的长度$("#hint").html(words[words_index].notice)  //设置显示单词中文$("#result").html("" + rightcount + "/" + allcount)  //设置进度指示器}}) function update() {isOK = false  //将是否正确设为falsewords_index++  //将单词索引自增 与下方代码可以优化$("#hint").html(words[words_index].notice)  //设置显示单词中文$("#text").val("")  $("#notice").html("")//将部分文案清空$("#result").html("" + rightcount + "/" + allcount)  //更新进度指示器}$("#text").off("input").on("input",  //输入事件function() {var hint = $("#hint").html()  //获取中文显示位置的文本（用于检测是否默写完成 可以使用变量优化）$("#notice").html("")  //将左下角提示清空if (hint == "<font color=\"green\">恭喜你 默写完成</font>") {} else {var value = words[words_index].name.trim()value = value.toLowerCase() if ($("#text").val().toLowerCase().trim() == value) {isOK = true} else {isOK = false}//判断正误}}) $("#text").off("keydown").on("keydown",function(e) {if (e.keyCode == 13) {  //按下回车事件if (isOK == false) {$("#notice").html("<font color='red'>请输入正确的单词：" + words[words_index].name + "</font>")$("#help").html("提示（" + ++helpcount + "次）")$("#text").val("")setTimeout(function() {$("#notice").html("")},1000)//输入错误} else {setTimeout(function() {rightcount++if (rightcount >= allcount) {$("#text").val("") $("#result").html("") $("#notice").html("") $("#help").html("统计") $("#hint").html("<font color='green'>恭喜你 默写完成</font>")} else {update()}},100)//输入正确}}}) $("#help").off("click").on("click",  //提示按钮点击事件function() {if (rightcount < allcount) {  //这也是判断是否默写完成的方法...才发现我的代码这么不统一规范if(versionS == "release") {$("#notice").html(words[words_index].name.substring(0, 2))  //1} else {$("#notice").html(words[words_index].name)  //2}//判断是否是正式版本并且执行1.提示两字母 2.全部提示$("#help").html("提示（" + ++helpcount + "次）")} else {alert("共默写" + allcount + "个单词 共提示" + helpcount + "次")  //可以增加其他内容如用时}})$("#play").off("click").on("click",  //点击喇叭事件function() {if (rightcount < allcount) {var audio = new Audio("http://dict.youdao.com/speech?audio=" + words[words_index].name)audio.play()} else {var audio = new Audio("win.mp3")  //该资源文件我会上传audio.play()}})}})
</script>
<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>

谢谢！

2月27日release 1.2.0 测试请到文首：

不知道有没有人会来找我的QQ：2996681473

制作一个网页背单词系统相关推荐

看各路单词APP不顺手索性自己写一个背单词系统
作者:王木一来源:恰好恰好本文约 3500 字预计阅读需要 8 分钟 https://github.com/Benature/WordReview 开门见山先放重点如果嫌 ...
看各路单词APP不顺手？索性自己写一个背单词系统
本文约 3500 字预计阅读需要 8 分钟 https://github.com/Benature/WordReview 开门见山先放重点懒人目录 1. 背单词方法论 / 痛点 2. WordR ...
c语言程序设计论文背单词系统,C语言课程设计-背单词系统(含程序)
C语言课程设计-背单词系统(含程序) 综合性程序设计报告设计题目: 背单词系统指导教师: XXX 班级: 学号: 设计者: XXX 成绩: _______________ 设计时间: 年 ...
php背单词网站,韩语干货｜推荐一个在线背单词炒鸡nice的网站!
原标题:韩语干货|推荐一个在线背单词炒鸡nice的网站! 今儿分享就是这个「轻松背单词」!大概是我之前备考的时候收藏的,背了一整级的单词,最近换电脑导收藏夹的时候找回了它. 其实背单词软件很多,我也看 ...
c语言背单词系统.doc,背单词系统
用c语言编写的背单词系统 1.题目描述背单词该系统是帮助学生背诵单词的软件,要求用户可以选择背诵的词库,并可以编辑自己的词库,系统可以给出中文,让学生输入其英文意思,也可输出英文让学生输入中文意思 ...
在html中怎么制作友情链接,如何制作一个网页链接，用描文本、友情链接交易方式教你如何制作？...
如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的优先,百度搜索引擎提升锚点链接 ...
为MacBook制作一个随身携带的windows系统
为MacBook制作一个随身携带的windows系统如果你还在为Macbook紧张的容量而烦恼是否使用Boot Camp安装windows操作系统,如果你还在担忧硬件的性能而是否使用虚拟机,如果你还 ...
教你用html+js制作一个自己的点名系统，实例代码分享
简介教你用html+js制作一个自己的点名系统,实例代码如下. 效果代码 HTML <div class="wrapper"><h1 align=" ...
背单词系统Python
#背单词系统用文件系统和面向对象的方式 class danci(): def new_del(self,a):#删除sying = aflag = Falsewith open('danciben. ...

制作一个网页背单词系统

制作一个网页背单词系统相关推荐

最新文章

热门文章