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

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

该简单应用 有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>

单页Html及Android App供小孩学习常用汉字的更多相关文章

  1. hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题

    APP打包工具:hbuilder 需要js包:mui.js ,引入方法https://www.cnblogs.com/v616/p/11290281.html 实现原理:在vue根组件App.vue监 ...

  2. Singal Page App：使用Knockout和RequireJS创建高度模块化的单页应用引擎

    Singal Page App 开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,大多还不 ...

  3. 【单页应用】全局控制器app应该干些什么？

    前言 之前,我们形成了页面片相关的mvc结构,但是该结构还仅适用于view(页面)级,那么真正的全局控制器app应该干些什么事情呢?我觉得至少需要干这些: 功能点 ① 提供URL解析机制,以便让控制器 ...

  4. Android APP应用启动页白屏(StartingWindow)优化

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 StartingWindow 的处理方式: 使用系统默认的 StartingWindow :用户点了应用图标启动应用,马上弹出系统默 ...

  5. Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法（转）

    转载: Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法   首先感谢博主分享,本文作为学习记录 惊鸿一瞥 微信的启动页,相信大家都不陌生. 不知道大家有没有发现一个现象 ...

  6. 单页应用（SPA，Single-page-App）和多页应用（MPA，Multi-page App）的区别

    单页应用(SPA,Single-page-App)和多页应用(MPA,Multi-page App)的区别 参考博客:https://www.jianshu.com/p/4c9c29967dd6

  7. Android APP 性能优化的一些思考

    说到 Android 系统手机,大部分人的印象是用了一段时间就变得有点卡顿,有些程序在运行期间莫名其妙的出现崩溃,打开系统文件夹一看,发现多了很多文件,然后用手机管家 APP 不断地进行清理优化 ,才 ...

  8. Android App性能评测分析－流畅度篇

    1.前言 在手机App竞争越来越激烈的今天,Android App的各项性能特别是流畅度不如IOS,安卓基于java虚拟机运行,触控响应的延迟和卡顿比IOS系统严重得多.一些下拉上滑.双指缩放快速打字 ...

  9. Android app 性能优化的思考--性能卡顿不好的原因在哪？

    说到 Android 系统手机,大部分人的印象是用了一段时间就变得有点卡顿,有些程序在运行期间莫名其妙的出现崩溃,打开系统文件夹一看,发现多了很多文件,然后用手机管家 APP 不断地进行清理优化 ,才 ...

随机推荐

  1. __sizeof__()

    https://bugs.python.org/issue2898 https://bugs.python.org/file10353/footprint.patch Index: Python/sy ...

  2. sql索引原理以及优化

    http://itindex.net/detail/52237-%E7%B4%A2%E5%BC%95-%E5%8E%9F%E7%90%86 http://itindex.net/detail/5171 ...

  3. noi2014魔法森林

    为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含

  4. HDU3567 Eight II —— IDA*算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3567 Eight II Time Limit: 4000/2000 MS (Java/Others)  ...

  5. jQuery常用插件大全（9）ResponsiveSlides插件

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  6. Collections工具类、Map集合、HashMap、Hashtable(十八)

    1.Map集合概述和特点 * A:Map接口概述 * 去重复, * 查看API可以知道, * 将键映射到值的对象, * 一个映射不能包含重复的键, * 每个键最多只能映射到一个值.* B:Map接口和 ...

  7. java中wait和notify

    在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的进程同步是通过synchronized()来实现的,需要说明的是,JAVA的synchronized()方法类似于操作系统概念中的 ...

  8. LA-3905 (扫描线)

    题意: 给一些流星的初始位置和运动向量,给了相机的拍摄范围;问你最多能拍到多少颗流星; 思路: 将流星用出现在相机拍摄范围内的时间段表示;sort后在扫面端点更新最大值; Ac代码: #include ...

  9. hdu-5676 ztr loves lucky numbers(乱搞题)

    题目链接: ztr loves lucky numbers  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 65536/65536 K ( ...

  10. Android 不同阶段 Logo 显示

    /********************************************************************* * Android 不同阶段 Logo 显示 * 说明: ...