首先,这是个简单的工具,主要目的是用来帮助记忆。即给定题目,先把答案隐藏起来,自己回想后再去跟答案进行比对。
你问我为什这么页面这么“简洁”?
这是个自用的工具,能看得下去能用就行。
为什么不用前端框架写?
因为麻烦,以后若有机会可以进行美化和重构。
为什么要分享出来?
只因闲着蛋疼。
用法很简单,把index.html和editor.html放到同一个文件夹,然后点击index.html即可
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<style>
body{
position: absolute;
margin-left: 40%;
margin-top: 10%;
}
</style>
</head>
</head>
<body class="">
<a href="editor.html">去编辑</a>
<h1>记忆助手</h1>
<h2 id="pro"></h2>
<textarea id="story" name="story"
rows="15" cols="50">
</textarea>
<button onclick="getAns()">查看答案</button>
<button onclick="getPre()">上一题</button>
<button onclick="getNext()">下一题</button>
<h4 id="ans"></h4>
</body>
<script>
let index = 0;
let showAns = false;
let set = null;
function getAns() {
let ans = document.getElementById("ans");
if (showAns) {
ans.innerText = set[index][1];
}else{
ans.innerText = "";
}
showAns = !showAns;
}
function getPre() {
if (index > 0) index--;
change();
}
function getNext(){
if (index + 1 < set.length) index++;
change();
}
function change(){
showAns = false;
getAns();
let pro = document.getElementById("pro");
pro.innerText = set[index][0];
}
let pset = localStorage.getItem("problemSet");
set = JSON.parse(pset);
change();
</script>
</html>
editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<head>
<style>
body{
text-align: center;
margin-top: 5%;
}
.item{
margin: 20px;
}
.divider{
border: 1px solid;
color: black;
}
.btns{
position: fixed;
left: 5%;
top: 15%;
}
</style>
</head>
</head>
<body>
<a href="index.html">去首页</a>
<div class="btns">
<button onclick="add()">添加</button>
<button onclick="save()">保存</button>
<button onclick="down()">下载</button>
<input type="file" id="fileInput" dirname="导入">
</div>
</body>
<script>
let con = null;
//题目集合,从本地缓存读
let pset = JSON.parse(localStorage.getItem("problemSet"))
//更新页面
change()
document.getElementById("fileInput").addEventListener('change', ()=>{
const reader = new FileReader()
reader.readAsText(document.getElementById("fileInput").files[0]) // input.files[0]为第一个文件
reader.onload = ()=>{
pset = JSON.parse(reader.result);
change();
}
}, false)
//创建页面元素
function change() {
if (con != null) document.body.removeChild(con);
con = document.createElement("div");
document.body.append(con);
for (let e of pset) {
createItem(e[0], e[1]);
}
}
//添加新项
function add() {
createItem("", "");
}
//把页面的数据同步到题目集合里
function sync() {
let list = document.body.getElementsByTagName("textarea")
let c = null;
let cset = []
for (let e of list) {
if (c == null) {
c = [e.value];
} else {
c.push(e.value)
cset.push(c);
c = null;
}
}
pset = cset;
}
//保存到本地
function save() {
sync()
localStorage.setItem("problemSet", JSON.stringify(pset))
}
//下载到计算机
function down() {
sync()
// 上面是拿到我自己的数据,数据的格式是Json字符串
var blob = new Blob([JSON.stringify(pset)], {type: 'application/json'})
// 创建一个blob的对象,把Json转化为字符串作为我们的值
if ("msSaveOrOpenBlob" in navigator) {
// 这个判断要不要都行,如果是IE浏览器,使用的是这个,
window.navigator.msSaveOrOpenBlob(blob, "results.txt");
} else { // 不是IE浏览器使用的下面的
var url = window.URL.createObjectURL(blob)
// 上面这个是创建一个blob的对象连链接,
var link = document.createElement('a')
// 创建一个链接元素,是属于 a 标签的链接元素,所以括号里才是a,
link.href = url;
// 把上面获得的blob的对象链接赋值给新创建的这个 a 链接
link.setAttribute('download', "results.txt")
// 设置下载的属性(所以使用的是download),这个是a 标签的一个属性
// 后面的是文件名字,可以更改
link.click();
// 使用js点击这个链接
}
}
//创建自定义元素
function createItem(pname, aname) {
let d = document.createElement("div");
d.className = "item"
let pn = document.createElement("p");
pn.innerText = "题目"
let an = document.createElement("p");
an.innerText = "答案"
let pnt = document.createElement("textarea");
pnt.innerText = pname
pnt.cols = 60
let ant = document.createElement("textarea");
ant.innerText = aname
ant.cols = 60
let divider = document.createElement("div")
divider.className = "divider"
let btn = document.createElement("button")
btn.innerText = "删除";
btn.addEventListener("click", () => {
pset.forEach(function (item, index, arr) {
if (item[0] === pname) {
arr.splice(index, 1);
con.removeChild(d)
}
});
})
d.append(btn, pn, pnt, an, ant, divider);
con.appendChild(d)
}
</script>
</html>