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

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

该简单应用 有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. Safair css hack

    一下方式不会影响chrome浏览器样式 _::-webkit-full-page-media, _:future, :root .class{ /*此处放css样式*/ }

  2. 微信小程序 navigateTo 传对象参数

    当微信小程序navigateTo传入参数是个object时,请使用JSON.strtingify将object转化为字符串,代码如下: wx.navigateTo({ url: '../sendChe ...

  3. UIProgress控件的属性和方法

    进度条控件是IOS开发中一个简单的系统控件,使用总结如下: 初始化一个进度条: - (instancetype)initWithProgressViewStyle:(UIProgressViewSty ...

  4. java.lang.IllegalStateException: No instances available for localhost

    在SpringCloud的项目中,我们使用了自动配置的OAuth2RestTemplate,RestTemplate,但是在使用这些restTemplate的时候,url必须是服务的名称,如果要调用真 ...

  5. linux地址映射1、2、3（⭐⭐⭐）

    欢迎关注瘋耔新浪微博:http://weibo.com/cpjphone 一.线性映射与非线性映射                                                   ...

  6. Hihocoder #1098 : 最小生成树二·Kruskal算法 ( *【模板】 )

    #1098 : 最小生成树二·Kruscal算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用 ...

  7. Swift（一）简单值

    Swift的源文件扩展名是.swift 按照国际惯例,学习一门新语言写的第一个程序都是在屏幕上输出一句 “Hello, world!” .在Swift里,一行代码就搞定了: 如果你以前写过C或者Obj ...

  8. Fabric原理剖析

    Fabric架构   image.png Fabric网络   image.png Fabric模块   image.png Fabric交易流 根据Hyperledger Fabric 1.0架构, ...

  9. 【JSOI 2014】序列维护

    [题目链接] 点击打开链接 [算法] 线段树 注意标记下传 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 5 ...

  10. Dijkstra再理解+最短路计数

    众所周知,Dijkstra算法是跑单源最短路的一种优秀算法,不过他的缺点在于难以处理负权边. 但是由于在今年的NOI赛场上SPFA那啥了(嗯就是那啥了),所以我们还是好好研究一下Dij的原理和它的优化 ...