为了检验及帮助小孩学习常用汉字,简单开发本网页应用;
常用汉字是按使用频率排序的,来源于网上;
该简单应用 有Android APP下载 “学习常用汉字_20150910.apk”
单页Html 示例效果图:
step1.点击 重置-再学一遍 ,数据进行重置;
(用到window.localStorage,支持html5的浏览器下次再访问时,可以保留上次的进度)
step2.点击下方要学汉字div中的汉字,则标示该汉字已经学习且已经认识,该汉字转入已知汉字;
step3.或者 点击上方已知汉字div中的汉字,则标示该汉字并未学习且并不认识,该汉字转入要学汉字;
相应html源码如下:
<html>
<head> <title></title> <style> #main { height: 85%; } #div-yes { height: 40%; border:1px solid green; overflow:scroll;color:#fff; background:black; } #div-no{ height: 40%; border:1px solid green; overflow:scroll; color:#fff; background:black; } #header{ padding:10px; font-weight:bold; border:1px solid green; margin:5px 0; text-align:center;} #footer{ padding:2px; font-weight:small; border:1px solid green; margin:1px 0; text-align:center;} .span-char{ font-size : 20pt; margin:10px; cursor:hand; } .span_count{font-weight:bold;color:red;} </style> </head> <body> <div id="header"> 常用汉字学习 <button type="button" id="btn_reset" onclick="btn_reset_onclick();">重置-再学一遍</button></div> <div id="main"> <div>已知汉字:<span class="span_count" id="span_count_yes">0</span></div> <div class="item" id="div-yes"> </div> <!--<div style="clear: both;"> </div>--> <div>要学汉字:<span class="span_count" id="span_count_no">0</span></div> <div class="item" id="div-no"> </div> </div> <div id="footer"> <p> 提示:点击文字,标示已学习或要学习; </p> <a href="http://www.cnblogs.com/freeliver54"