javascript制作的简单的速算器，html+css+js简单应用-CSDN博客

本文链接：https://blog.csdn.net/m0_67803428/article/details/137471047

这是一个超级简单可以进行练习口算的速算器，html和css以及javscript分别有三个。分别创建index.html和index.css以及index.js文件，把对应代码放进去即可，注意，玩的时候有声音哦。

我用的是最传统的方式写的，不是最简便的写法，前段的第一课，超级简单的应用，如果有那里错的望指出。

html代码：

css代码:

javascript代码:

html代码：

<!DOCTYPE html>

<html>

<head>

<title>简易的速算器</title>

</head>

<body>

时间:<input type="text" size="12" value="0:00" name="time" disabled="disabled">

＋<input type="radio" value="+" checked name="num-area">

-<input type="radio" value="-" name="num-area">

*<input type="radio" value="*" name="num-area">

/<input type="radio" value="/" name="num-area">

</form>

</div>

</div>

</div>

</body>

</html>

css代码:

#top,#count,#mian{

width:320px;

margin:20px auto;

text-align:center;

clear:both;

}

#count>div{

width:80px;

font-size:20px;

float:left;

}

#out,#num{

width:310px;

height:60px;

font-size:22px;

line-height:60px;

border:5px solid black;

border-bottom:none;

}

#in>div{

width:100px;

height:100px;

font-size:30px;

line-height:100px;

float:left;

background:pink;

border-top:5px solid black;

border-right:5px solid black;

}

.left-border{

border-left:5px solid black;

}

.bottom-border{

border-bottom:5px solid black;

}

javascript代码:

var flag=false;result="";right_num=0;error_num=0;

var start=document.querySelector("#in>div:last-child");

var radio=document.getElementsByName("num-area");

var out=document.querySelector("#out");

var num_click=document.querySelectorAll("#in>div:not(#in>div:last-child)");

var num=document.querySelector("#num");

var right=document.querySelector("#right");

var error1=document.querySelector("#error");

//以下添加初始化每一轮随机数

function update(){

//获取算术符号，随机产生

for(var i=0;i<radio.length;i++){

if(radio[i].checked){

result=parseInt(Math.random()*99+1)+radio[i].value+parseInt(Math.random()*99+1);

out.innerHTML=result;

break;

}

//以下添加开始绑定事件

start.οnclick=function(){

right_num=0;error_num=0;

right.innerHTML=0;

error.innerHTML=0;

num.innerHTML="";

if(flag)clearInterval(timer);

update();

//以下进行计时

var time=0;

timer=setInterval(fn,1000);

function fn(){

time++;

form.time.value=parseInt(time/60)+":"+(time%60<10?"0"+time%60:time%60);

}

flag=true;

}

//y以下添加数字按钮点击绑定事件

for(var i=0;i<num_click.length;i++){

num_click[i].οnclick=function(){

if(!flag)return;

num.innerHTML+=this.innerHTML;

if(parseInt(eval(result)).toString().indexOf(num.innerHTML)==0){

if(eval(result)==num.innerHTML){

new Audio('https://downsc.chinaz.net/files/download/sound1/201212/2445.mp3').play();

right_num++;

right.innerHTML=right_num;

num.innerHTML="";

update();

}

}else{//如果不符合条件执行下面代码

new Audio('https://downsc.chinaz.net/files/download/sound1/201403/4204.mp3').play();

error_num++;

error.innerHTML=error_num;

num.style.color="red";

setTimeout(function(){

num.style.color="";

num.innerHTML="";

update();

},500);

}