web版在线打字程序
演示地址：
http://itkey.fun/index.jsp
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>旭哥的五笔3-计时可暂停版本</title>
<script src="/js/vue.js"></script>
<style>
.red{
color: red;
font-weight:bold;
}
.green{
color: #006666;
font-weight:bold;
/*font-size: 2px;
display: none;*/
text-decoration:line-through
}
.text-static{
font-size: 18px;
}
</style>
</head>
<body>
<div id="app">
<div class="text-static" style="cursor:pointer;">
<span @click="searchInfo(item.z)" :class="{ red:item.f==1,green:item.f==2}" v-for="item in charList">{{item.z}}</span>
</div>
<textarea class="text-static" @focus="myFocus" v-model="message" style="width: 100%;height: 300px"></textarea>
<p>已录入：{{inputLength}} 总数：{{exerciseTextLength}} 用时：{{totalTime}}秒 速度: {{speed}}</p>
<form target="_blank" id="myform" action="https://www.52wubi.com/wbbmcx/search.php" method="post">
<input type="text" v-model="keyword" name="hzname" placeholder="请输入您要查询的汉字。新增支持拼音字母查询">
<input id="su" class="sb" type="submit" value="五笔搜索">
<input class="sb" type="button" @click="pause" value="暂停" :value="isPause==true?'继续':'暂停'">
</form>
</div>
</body>
<script>
var text = '冰灯是流行于中国北方的一种古老的民间艺术形式。因为独特的地域优势，黑龙江可以说是制作冰灯最早的地方。传说在很早以前，每到冬季的夜晚，在松嫩平原上，人们总会看到三五成群的农夫和渔民在悠然自得地喂马和捕鱼，他们所使用的照明工具就是用冰做成的灯笼。这便是最早的冰灯。当时制作冰灯的工艺也很简单，把水放进木桶里冻成冰坨，凿出空心，放个油灯在里面，用以照明，冰罩挡住了凛冽的寒风，黑夜里便有了不灭的灯盏，冰灯成了人们生活中不可缺少的帮手。';
var app = new Vue({
el: '#app',
data: {
intervalId: null,
startTime: new Date().getTime(),
keyword:'', //查询关键字
totalTime:0,
message: '',
charList:[],
exerciseText:text, //练习的全部文本
isPause: false //是否暂停
},
created: function () {
for (var i = 0; i < this.exerciseText.length; i++) {
var zi = this.exerciseText.charAt(i);
var item = {
z:zi,
f:0
}
this.charList.push(item);
}
},
methods: {
pause: function(){
if(this.isPause){
this.isPause = false;
}else
this.isPause = true
},
//查询五笔编码
searchInfo: function(z){
this.keyword = z;
function myfun(){
document.getElementById("myform").submit();
}
setTimeout(myfun, 200);
},
start() {
this.startTime = new Date().getTime();
// 计时器正在进行中，退出函数
if (this.intervalId != null) {
return;
};
// 计时器为空，操作
this.intervalId = setInterval(() => {
var flag = this.isPause;
if(flag == true){
return;
}else{
console.log(flag);
this.totalTime ++;
}
}, 1000)
},
//输入框获取焦点
myFocus: function () {
if(this.inputLength<=0){
console.log('开始计时');
this.start();
}
},
//变换颜色
changeColor: function (index,f) {
var item = this.charList[index];
if(item){
item.f =f;
}
}
},
computed: {
// 计算属性的 getter
inputLength: function () {
//todo:遍历了所有的字符，后面可以优化性能
var exercLen = this.exerciseText.length;
for (var i = 0; i < this.exerciseText.length; i++) {
this.changeColor(i,0);
}
var len = this.message.length;
//录入完成自动暂停
if(len==exercLen){
this.isPause = true;
}
if(len>=1){
for (var i = 0; i < len; i++) {
var inputChar = this.message.charAt(i);
var trueChar = this.exerciseText.charAt(i);
//console.log("正确的字符："+trueChar+"输入的字符是："+ inputChar);
if(inputChar==trueChar){
//输入正确
this.changeColor(i,2); //绿色
}else{
this.changeColor(i,1); //红色
}
}
}
return len;
},
exerciseTextLength: function () {
return this.exerciseText.length;
},
speed: function () {
var zmmin = ((this.inputLength/this.totalTime))*60; //xxx字每分钟
zmmin = zmmin.toFixed(2);
if(zmmin.indexOf(".00")>=0){ //后面是.00就去掉
zmmin = zmmin.substring(0,zmmin.length-3);
}
if(zmmin.indexOf("NaN")>=0){
zmmin = 0;
}
return zmmin+"字/分钟"
}
}
})
</script>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
