前端应用

本程序实现汉字笔顺练习，同时有拼音及汉字发单，先见效果图：

 详细程序包可在我共享中下载。

js主文件（app.js）

var writer; var isCharVisible; var isOutlineVisible;

function printStrokePoints(data) {     var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);     console.log(`[${pointStrs.join(', ')}]`); }

function updateCharacter() {     var character = document.querySelector('.js-char').value;         var targetBgHtml = ''+             ''+             ''+             ''+             ''+             ''+             ''+             '';                  document.querySelector('#target').innerHTML = targetBgHtml;     var fayin = 'https://tts.baidu.com/text2audio.mp3?tex='+character+'&cuid=baike&lan=ZH&ctp=1&pdt=301&vol=100&rate=32&per=2&spd=3&pit=3'     var pinyin = pinyinUtil.getPinyin(character, ' ', true, 0);     var laba = '';     var boyin = '';     document.querySelector('#pinyin').innerHTML = pinyin + ' '+laba + boyin;     window.location.hash = character;     writer = HanziWriter.create('target', character, {         width: 360,         height: 360,         radicalColor: '#166E16',         onCorrectStroke: printStrokePoints,         onMistake: printStrokePoints,         showOutline: true     });     isCharVisible = true;     isOutlineVisible = true;     window.writer = writer; }

window.onload = function() {     var char = decodeURIComponent(window.location.hash.slice(1));     if (char) {         document.querySelector('.js-char').value = char;     }

    updateCharacter();

    document.querySelector('.js-char-form').addEventListener('submit', function(evt) {         evt.preventDefault();         updateCharacter();     });

    document.querySelector('.js-toggle').addEventListener('click', function() {         isCharVisible ? writer.hideCharacter() : writer.showCharacter();         isCharVisible = !isCharVisible;     });     document.querySelector('.js-toggle-hint').addEventListener('click', function() {         isOutlineVisible ? writer.hideOutline() : writer.showOutline();         isOutlineVisible = !isOutlineVisible;     });     document.querySelector('.js-animate').addEventListener('click', function() {         writer.animateCharacter();     });     document.querySelector('.js-quiz').addEventListener('click', function() {         writer.quiz({             showOutline: true         });     }); } function boyin(){     document.getElementById("boyin").play(); }

html页面主文件（index.html）

                                                     汉字笔顺书写演示                   

        汉字笔顺书写演示                      汉字：                          确定                               显示/隐藏             描红 开/关             书写演示             书写练习                                                                                                                                                                                                                  

样式表文件（styles.css）

@font-face {     font-family: 'Ausion Personal Use';     src: url("../fonts/AusionPersonalUse.otf") format("opentype");       font-family: 'STXIHEI';     src: url("../fonts/STXIHEI.TTF");                   }

body, html {     background: #f4f0ea;     margin: 0;     padding: 0;     text-align: center;     font-family: 'Ausion Personal Use','Raleway', sans-serif;     font-size: 14px; } body {     padding-bottom: 80px; } * {     box-sizing: border-box; }

input, button {     outline: none; } button, #target, .title {     box-shadow: 0 1px 5px rgba(0,0,0,0.15); }

button, #target {     text-shadow: 0 1px 1px white; }

.title {     color: white;     background: linear-gradient(to bottom, #333, #222);     padding: 15px 0;     margin: 0 0 30px;     text-shadow: 0 0 15px #55aa7f; }

#target {     background: white;     clear: both;     border: 0px solid black;     width: 360px;     height: 360px;     margin: 0 auto; }

.char-form {     margin: 0 0 20px; } .char-form label{     font-size: 20px; } .char-form button ,.char-form button:hover{     padding: 6px 15px;     font-size: 16px;     display: inline-block;     vertical-align: top;     background-color: rgba(85, 170, 127, 1.0);     border: 0px;     color:rgba(255, 255, 255, 1.0);     border-radius: .2rem; }

.char-input {     font-size: 20px;     padding: 5px;     width: 50px;     text-align: center;     border: 0px;     color:rgba(255, 85, 0, 1.0);     border-radius: .2rem; }

.actions {     width: 360px;     margin: 0 auto; }

.actions button {     display: block;     padding:5px 10px;     width:86px;     float: left;     margin-right: 4px;     margin-bottom: 4px; } .actions button:last-child {     margin-right: 0; }

button {     background: none;     border: 1px solid #444;     color: #444;     cursor: pointer;     transition: all 300ms;     border-radius: .2rem; }

button:hover {     color: #55aa7f;     border: 1px solid #55aa7f;     box-shadow: none; } #pinyin{     width: 360px;     height: 50px;     margin: 10px auto;     background-color: rgba(255, 255, 255, 1.0);     border: 0px;     color:rgba(22,110,22, 1.0);     font-size: 40px;     font-weight: 600;     font-family: "STXIHEI","Ausion Personal Use";     box-shadow: 0 1px 5px rgba(0,0,0,0.15);     clear: both; }