家里小朋友该学汉字了，大人时间总是有限的，作为码农的人总是希望有一个简单的方法。下面作了一个简单的，主要是自己用，优不优化都无所谓了。
这是之前做的了，今天想起把它整理了一下。浏览器运行即可，个别浏览器会没有语音输出。
代码片段，因为还包含了其它功能。其实对于代码人来说是简单的一件事，主要是分析了百度的汉字资源，同时作为neo和goquery库的简单应用。
点击汉字，会有笔画显示、字义、拼音，会读出拼音，汉字是随机排序的。需要添加修改汉字是在代码中进行。
"github.com/ivpusic/neo"
"github.com/PuerkitoBio/goquery"app := neo.App()
app.Serve("/img", *ImagePath)
app.Serve("/js", "./js")
//中间件
app.Use(func(ctx *neo.Ctx, next neo.Next) {
log.Info(ctx.Req.URL.Path)
next()
})//学汉字: https://hanyu.baidu.com/s?wd=字&from=zici
app.Get("/Chinese", func(ctx *neo.Ctx) (int, error) {
return 200, Render(ctx, "./view/chinese.tpl", map[string]string{"Chinese": chinese_str})
})//返回汉字的相关信息
app.Get("/Ajax/Chinese/:hz", func(ctx *neo.Ctx) (int, error) {
var che Chinesedoc, err := goquery.NewDocument(fmt.Sprintf("https://hanyu.baidu.com/s?wd=%s&ptype=zici", ctx.Req.Params.Get("hz")))
if err == nil {
che.JinTu, _ = doc.Find("#header-img .alter-text").Attr("style")
che.JinTu = che.JinTu[len("background-image: url(") : len(che.JinTu)-1]
che.DongTu, _ = doc.Find("#header-img .alter-text img").Attr("data-gif")
che.PinYin = strings.Trim(strings.Trim(doc.Find("#pinyin").Text(), " "), " ")
che.PinYinMp3, _ = doc.Find(".mp3-play").Attr("url")
che.ShiYi, _ = doc.Find("#basicmean-wrapper div").Html()
che.BaiKe, _ = doc.Find("#baike-wrapper .tab-content").Html()
che.JinYi, _ = doc.Find("#syn_ant_wrapper #synonym div").Html()
che.FanYi, _ = doc.Find("#syn_ant_wrapper #antonym div").Html()
che.YinWen, _ = doc.Find("#fanyi-wrapper .tab-content").Html()
doc.Find("#zuci-wrapper div a").Each(func(i int, s *goquery.Selection) {
if s.Text() != "更多" {
if che.CiZu == "" {
che.CiZu = s.Text()
} else {
che.CiZu = che.CiZu + "，" + s.Text()
}
}
})
//cmd := "killall play ; play " + che.PinYinMp3 + "; ./say " + che.CiZu
//go tools.Shell(cmd)
return 200, ctx.Res.Json(che)
} else {
return 200, ctx.Res.Text("")
}
})
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
*{ padding: 0;margin: 0;}
li{list-style-type: none; margin-top: 30px; }
body{ margin: 20px;}
.wrap{ border: 0px solid #f00; width: 100%; height: 240px; position: relative; overflow: hidden; }
img { width:100%; }
.wrap ul{ overflow: hidden; position:absolute; width: 1600px; left: 0; top: 0; _height:1px; }
.wrap ul li{ float: left; width: 200px; height:200px; padding:5px; }
a { text-decoration:none;color:#000; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">function Load() {
var JPic="";
var DPic="";
var Info="";
var JPicList,DPicList;var Chinese = "{{.Chinese}}";
var ChiList = Chinese.split(",");
ChiList.sort(function(){return Math.random()>0.5?-1:1;}); //打乱顺序for (var i in ChiList.slice(1,30)){
$.ajax({
async: false,
url: "/Ajax/Chinese/"+ChiList[i],
success: function(data){
if (JPic=="") {
JPic = data.JinTu;
} else {
JPic = JPic + "+" + data.JinTu;
}
if (DPic=="") {
DPic = data.DongTu;
} else {
DPic = DPic + "+" + data.DongTu;
}
}
});
}
JPicList = JPic.split("+");
DPicList = DPic.split("+");
for (var i in JPicList){
if (Math.random()>0.5) { //打乱显示
Info = Info + "\n<li><img src='" + JPicList[i] + "' data-name='" + ChiList[i] + "' alt='" + DPicList[i] +"' /></li>";
} else {
Info = "<li><img src='" + JPicList[i] + "' data-name='" + ChiList[i] + "' alt='" + DPicList[i] +"' /></li>\n" + Info;
}
}
$("#showimg").html(Info);}
$(document).ready(function() {
Load();var oul = $('.wrap ul');
var oulHtml = oul.html();
oul.html(oulHtml+oulHtml)
var timeId = null;var ali = $('.wrap ul li');
var aliWidth = ali.eq(0).width();
var aliSize = ali.size();
var ulWidth = aliWidth*aliSize;
oul.width(ulWidth); //1600px
var speed = 2;function slider(){
if(speed<0){
if(oul.css('left')==-ulWidth/2+'px'){
oul.css('left',0);
}
oul.css('left','+=-2px');
}
if(speed>0){
if(oul.css('left')=='0px'){
oul.css('left',-ulWidth/2+'px');
}
oul.css('left','+='+speed+'px');
}
}
// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
timeId = setInterval(slider,30);$('.wrap').mouseover(function(){
clearInterval(timeId); // clearInterval()函数的作用是用来清除定时器
});$('.wrap').mouseout(function(){
timeId = setInterval(slider,30);
});$('.goLeft').click(function(){
speed=-2;
});$('.goRight').click(function(){
speed=2;
});$("img").mouseover(function(){
var a = $(this).attr("alt");
var b = $(this).attr("src");
$(this).attr("alt",b);
$(this).attr("src",a);
});
$("img").mouseout(function(){
var a = $(this).attr("alt");
var b = $(this).attr("src");
$(this).attr("alt",b);
$(this).attr("src",a);
});
$("img").click(function(){
var hz = $(this).attr("data-name");
$.ajax({
url: "/Ajax/Chinese/"+hz,
success: function(data){
//var jsonstr =JSON.stringify(data);
//console.log(jsonstr);
var info = "";info = info + "<h2>拼音</h2>" + data.PinYin + "<audio id='playsound' src='" + data.PinYinMp3 +"' autoplay preload></audio>";
info = info + "<h2>释义</h2>" + data.ShiYi;
info = info + "<h2>词组</h2>" + data.CiZu;
info = info + "<h2>百科</h2>" + data.BaiKe;
info = info + "<h2>近义词/反义词</h2>近义词:" + data.JinYi + "<br/>反义词:" + data.FanYi;
info = info + "<h2>英文</h2>" + data.YinWen;
$("#content").html(info);
//$.ajax({
// url: "/mp3/" + (data.PinYinMp3).replace(/\//g,"|"),
//});
}
});
});});
</script>
</head>
<body>
<div>
<a href="javascript:;" class="goLeft">向左走</a>
<a href="javascript:;" class="goRight">向右走</a>
<a href="javascript:;" οnclick="window.location.reload()">重载入</a>
<div class="wrap">
<ul id="showimg">
</ul>
</div>
</div>
<div id="content"></div>
</body>
</html>