600字范文 > 前端应用 - 汉字笔顺书写演示带拼音及发音进阶版

前端应用 - 汉字笔顺书写演示带拼音及发音进阶版

时间：2020-02-12 16:26:02

本版本更加适合小学一年级学生学习汉字笔顺，优化后说明：

1.支持多文字演示，可以上下页切换

2.支持连续书写演示和连续书写练习

html:

<!DOCTYPE html>

<head>

<title>汉字笔顺书写演示</title>

</head>

<body>

<h1 class="title">汉字笔顺书写演示</h1>

</div>

</svg>

</div>

</body>

</html>

app.js:

$(function() {

var writer;

var isCharVisible;

var isOutlineVisible;

var hzArr = [];

function printStrokePoints(data) {

var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);

}

function updateCharacter(character) {

var targetBgHtml = '<line x1="0" y1="0" x2="360" y2="0" stroke="#DDD"/>'+

'<line x1="0" y1="0" x2="0" y2="360" stroke="#DDD"/>'+

'<line x1="0" y1="360" x2="360" y2="360" stroke="#DDD"/>'+

'<line x1="360" y1="0" x2="360" y2="360" stroke="#DDD"/>'+

'<line x1="0" y1="180" x2="360" y2="180" stroke="#DDD"/>'+

'<line x1="180" y1="0" x2="180" y2="360" stroke="#DDD"/>'+

'<line x1="0" y1="0" x2="360" y2="360" stroke="#DDD"/>'+

'<line x1="0" y1="360" x2="360" y2="0" stroke="#DDD"/>';

$('#target').html(targetBgHtml);

var fayin = '/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 = '<span class="boyin"><img src="./static/images/laba.png" style="width: 32px;"></a>';

var boyin = '<audio src="'+fayin+'" id="boyin"></audio>';

$('#pinyin').html(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;

}

updateCharacter('永');

$(document).on('click','.boyin',function(){

document.getElementById("boyin").play();

});

$(document).on('click','.js-animate',function(){

$(this).addClass("check").siblings().removeClass("check");

writer.animateCharacter();

});

$(document).on('click','.js-quiz',function(){

$(this).addClass("check").siblings().removeClass("check");

writer.quiz({

showOutline: true

});

$(document).on('click','.goOk',function(){

var _val = $('textarea[name="demo"]').val().trim();

_val = _val.replace(/[^\u4e00-\u9fa5]/gi,"");

$('textarea[name="demo"]').val(_val);

var _arr = _val.split("");

hzArr = _arr.filter(s => $.trim(s).length > 0);

if(hzArr.length > 0){

$('.goPrev').attr('val',hzArr.length);

$('.goNext').attr('val',0);

updateCharacter(hzArr[0]);

}

});

$(document).on('click','.goPrev',function(){

var _val = $(this).attr('val');

if(hzArr.length > 0){

var thisIndex = Number(_val)-1;

thisIndex = thisIndex < 0?0:thisIndex;

updateCharacter(hzArr[thisIndex]);

$('.goPrev').attr('val',thisIndex);

$('.goNext').attr('val',thisIndex+1);

if($('.js-animate').hasClass("check")){

writer.animateCharacter();

}

if($('.js-quiz').hasClass("check")){

writer.quiz({showOutline: true});

}

});

$(document).on('click','.goNext',function(){

var _val = $(this).attr('val');

if(hzArr.length > 0){

var thisIndex = Number(_val)+1;

thisIndex = thisIndex >= hzArr.length?0:thisIndex;

updateCharacter(hzArr[thisIndex]);

$('.goPrev').attr('val',thisIndex-1);

$('.goNext').attr('val',thisIndex);

if($('.js-animate').hasClass("check")){

writer.animateCharacter();

}

if($('.js-quiz').hasClass("check")){

writer.quiz({showOutline: true});

}

});

演示：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。