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

介绍了一个简单的网页应用,用于帮助孩子学习常用的汉字,并可通过点击来标记已学和未学的汉字。该应用支持HTML5,能保存用户的进度。

 

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

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

 

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

转载于:https://www.cnblogs.com/freeliver54/p/4636304.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值