单页Html及Android App供小孩学习常用汉字

为了检验及帮助小孩学习常用汉字，简单开发本网页应用；

常用汉字是按使用频率排序的，来源于网上；

该简单应用有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" target="_blank">edit by freeliver54</a>
    </div>
</body>
</html>
<script type="text/javascript">
/*
if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}
*/
var chars_all = "";
var chars_no = "";
var chars_yes = "";

var storage = window.localStorage;


function btn_reset_onclick(){
    chars_all = "的一是了我不人在他有这个上们来到时大地为子中你说生国年着就那和要她出也得里后自以会家可下而过天去能对小多然于心学么之都好看起发当没成只如事把还用第样道想作种开美总从无情己面最女但现前些所同日手又行意动方期它头经长儿回位分爱老因很给名法间斯知世什两次使身者被高已亲其进此话常与活正感见明问力理尔点文几定本公特做外孩相西果走将月十实向声车全信重三机工物气每并别真打太新比才便夫再书部水像眼等体却加电主界门利海受听表德少克代员许稜先口由死安写性马光白或住难望教命花结乐色使用频率排名的汉字更拉东神记处让母父应直字场平报友关放至张认接告入笑内英军候民岁往何度山觉路带万男边风解叫任金快原吃妈变通师立象数四失满战远格士音轻目条呢病始达深完今提求清王化空业思切怎非找片罗钱紶吗语元喜曾离飞科言干流欢约各即指合反题必该论交终林请医晚制球决窢传画保读运及则房早院量苦火布品近坐产答星精视五连司巴奇管类未朋且婚台夜青北队久乎越观落尽形影红爸百令周吧识步希亚术留市半热送兴造谈容极随演收首根讲整式取照办强石古华諣拿计您装似足双妻尼转诉米称丽客南领节衣站黑刻统断福城故历惊脸选包紧争另建维绝树系伤示愿持千史谁准联妇纪基买志静阿诗独复痛消社算算义竟确酒需单治卡幸兰念举仅钟怕共毛句息功官待究跟穿室易游程号居考突皮哪费倒价图具刚脑永歌响商礼细专黄块脚味灵改据般破引食仍存众注笔甚某沉血备习校默务土微娘须试怀料调广蜖苏显赛查密议底列富梦错座参八除跑亮假印设线温虽掉京初养香停际致阳纸李纳验助激够严证帝饭忘趣支春集丈木研班普导顿睡展跳获艺六波察群皇段急庭创区奥器谢弟店否害草排背止组州朝封睛板角况曲馆育忙质河续哥呼若推境遇雨标姐充围案伦护冷警贝著雪索剧啊船险烟依斗值帮汉慢佛肯闻唱沙局伯族低玩资屋击速顾泪洲团圣旁堂兵七露园牛哭旅街劳型烈姑陈莫鱼异抱宝权鲁简态级票怪寻杀律胜份汽右洋范床舞秘午登楼贵吸责例追较职属渐左录丝牙党继托赶章智冲叶胡吉卖坚喝肉遗救修松临藏担戏善卫药悲敢靠伊村戴词森耳差短祖云规窗散迷油旧适乡架恩投弹铁博雷府压超负勒杂醒洗采毫嘴毕九冰既状乱景席珍童顶派素脱农疑练野按犯拍征坏骨余承置臓彩灯巨琴免环姆暗换技翻束增忍餐洛塞缺忆判欧层付阵玛批岛项狗休懂武革良恶恋委拥娜妙探呀营退摇弄桌熟诺宣银势奖宫忽套康供优课鸟喊降夏困刘罪亡鞋健模败伴守挥鲜财孤枪禁恐伙杰迹妹藸遍盖副坦牌江顺秋萨菜划授归浪听凡预奶雄升碃编典袋莱含盛济蒙棋端腿招释介烧误";
    var all_length = chars_all.length;
    var allHtml = "";
    for(var i=0;i<all_length;i++){
        allHtml += '<span id="span-no-'+i+'" class="span-char" onclick ="span_no_clcik(this);">'+chars_all.charAt(i)+'</span>';
    }
    
    document.getElementById("div-no").innerHTML = allHtml;
    chars_no = chars_all;

    
    
    document.getElementById("div-yes").innerHTML = "";
    chars_yes = "";

    ref_display_count();
}

//from no to yes
function span_no_clcik(obj){
    document.getElementById("div-no").removeChild(obj);
    chars_no = chars_no.replace(obj.innerText,"");
    
    var tempHtml = obj.outerHTML.replace("span_no_clcik","span_yes_clcik");
    
    document.getElementById("div-yes").innerHTML = tempHtml + document.getElementById("div-yes").innerHTML;
    chars_yes = chars_yes + obj.innerText;
    

    
    ref_display_count();
    
    btn_save_onclick();
}

//from yes to no
function span_yes_clcik(obj){
    document.getElementById("div-yes").removeChild(obj);
    chars_yes = chars_yes.replace(obj.innerText,"");
    
    var tempHtml = obj.outerHTML.replace("span_yes_clcik","span_no_clcik");
    
    document.getElementById("div-no").innerHTML = tempHtml + document.getElementById("div-no").innerHTML;
    chars_no = chars_no + obj.innerText;
    
    ref_display_count();
    
    btn_save_onclick();
}

function btn_save_onclick(){
    //storage.setItem("all",chars_all);
    storage.setItem("yes",chars_yes);
    storage.setItem("no",chars_no);
}

//btn_reset_onclick();

function init_display(){
    chars_no = storage.getItem("no");
    if(chars_no==null){
        chars_no = "";
    }
    
    chars_yes = storage.getItem("yes");
    if(chars_yes==null){
        chars_yes = "";
    }
    
    var no_length = chars_no.length;
    var noHtml = "";
    for(var i=0;i<no_length;i++){
        noHtml += '<span id="span-no-'+i+'" class="span-char" onclick ="span_no_clcik(this,0,1);">'+chars_no.charAt(i)+'</span>';
    }
    document.getElementById("div-no").innerHTML = noHtml;
    
    
    var yes_length = chars_yes.length;
    var yesHtml = "";
    for(var i=0;i<yes_length;i++){
        yesHtml += '<span id="span-yes-'+i+'" class="span-char" onclick ="span_yes_clcik(this,0,1);">'+chars_yes.charAt(i)+'</span>';
    }
    document.getElementById("div-yes").innerHTML = yesHtml;
    
    ref_display_count();
    
    if(no_length == 0 && yes_length==0){
        btn_reset_onclick();
    }
}

function ref_display_count(){

    document.getElementById("span_count_no").innerHTML = chars_no.length;
    document.getElementById("span_count_yes").innerHTML = chars_yes.length;
    
    if(chars_no.length == 0){
        alert("Very Good!");
    }
}

init_display();



</script>

相关阅读:
TIM时钟频率计算
 时钟节拍tick
Continue作用
 struct结构体的字节长度，字节对齐
 IAR所包含的头文件位置
 Oracle存储过程给变量赋值的方法
 DataTable如何去除重复的行
 C#遍历窗体所有控件或某类型所有控件
 SqlServer无备份下误删数据恢复
 45.4.7 序列：USER_SEQUENCES(SEQ)
原文地址：https://www.cnblogs.com/freeliver54/p/4636304.html