预览
准备
下载待转换.txt
提取码: 7xb3
txtToHtml.py
def toHTML():
# 文件路径，记得更改 /home/czt/Documents/词汇/look_ME/待转换.txt
path = "/home/czt/Documents/词汇/look_ME/"
i = 0
with open('%s%s'%(path,"转换成功.txt"), 'a') as f:
for line in open('%s%s' % (path, "待转换.txt"), "r"):
# 以 tab 为切分
words = line.split('\t')
# 跳过 utf-8行
if words[0] == "\ufeff":
i = 0
continue
# 统计 空格 个数
num = 0
str1 = '' # 单词
str2 = '' # 音标和释义
for w1 in words:
if w1 == '':
num += 1
else:
# 列表转为字符串
str1 = words[num]
for w2 in words[num+1:]:
if w2 == '':
break
else:
str2 += ' ' + w2
break
if i == 0:
num -= 1
# 拼接字符串
html = '<div class="t' + str(num+1) + '"><span>' + str1 + '</span>' + str2+ '</div>\n'
# 写入文件
f.write(html)
i += 1
# 测试专用
if i < 20:
print(words)
# print(html)
print("--- 转换成功 ---")
# 调用函数
toHTML()
修改路径 path ，将待转换.txt文件移到path
打开终端运行
python txtToHtml.py
会输出以下结果，并且在你所设置的 path 下生成 转换成功.txt
words.html
将转换成功.txt部分内容拷进 47行 body内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>痛苦记单词</title>
<style>
div{
background-color:rgb(243, 243, 243);
margin-bottom: 5px;
padding: 10px;
border-radius: 5px;
font-size: 20px;
}
div:hover{
background-color:rgb(226, 245, 231);
}
.t1{
margin-top: 100px;
}
.t2{
padding-left: 100px;
}
.t3{
padding-left: 200px;
}
.t4{
padding-left: 300px;
}
.t5{
padding-left: 400px;
}
.t6{
padding-left: 500px;
}
.t7{
padding-left: 600px;
}
.t8{
padding-left: 700px;
}
@media screen and (max-width: 650px) {
.t1{
margin-top: 50px;
}
.t2{
padding-left: 20px;
}
.t3{
padding-left: 40px;
}
.t4{
padding-left: 60px;
}
.t5{
padding-left: 80px;
}
.t6{
padding-left: 100px;
}
.t7{
padding-left: 120px;
}
.t8{
padding-left: 140px;
}
}
</style>
</head>
<body>
<div class="t0"><span>bound</span> [baund] v./n.跳(跃) a.被束缚的，一定的；n.界限</div>
<div class="t2"><span>bound</span> [baund] v./n.跳(跃) a.被束缚的，一定的；n.界限</div>
<div class="t3"><span>boundary</span> ['baund?ri] n.分界线,边界</div>
</body>
<script>
$(document).ready(function(){
$("div").click(function(){
//方式一
//var words = new SpeechSynthesisUtterance($(this).context.children[0].textContent);
//window.speechSynthesis.speak(words)
//方式二
var audio = new Audio();
audio.src ='https://dict.youdao.com/speech?audio=' + encodeURI($(this).context.children[0].textContent);
audio.play();
});
});
</script>
</html>
用浏览器打开看看，点击每一行都可以单词发音，如果要修改发音，可查阅SpeechSynthesisUtterance和speechSynthesis，当然你也可以用有道等其他发音，为了支持手机播放，这里用的有道，不过记得带上耳机，不然会没有声音。如果你想制作成桌面程序，可以考虑Eletron，只需替换其中的index.html，但Eletron尚不支持手机端，至此结束。
