Code complet pour développer une calculatrice audio en utilisant javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>计算器</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#ffffcc;
font-size:12px;
font-family:"微软雅黑";
color:#666;
}
ul,ol{list-style:none;}
.cac{
width:410px;
background:#399;
margin:0 auto;
}
.cac .c_title{
font-size:16px;
color:#000;
padding:10px 0 10px 10px;
cursor:move;
}
.cac .c_show .c_txt{
width:390px;
height:42px;
font-size:34px;
color:#999;
border:none;
outline:none;
text-align:right;
padding-right:20px;
line-height:25px;
}
.cac .c_key ul{
border:1px solid #fff
}
.cac .c_key ul li{
border:1px solid #fff;
width:69px;
height:50px;
font-size:25px;
margin:5px;
float:left;
background:#cccc33;
line-height:50px;
cursor:pointer;
text-align:center;
}
.cac .c_key .c_tool{
background:#3399cc;
}
.clear{clear:both;}
</style>
</head>
<body>
<div>
<div>计算器</div>
<div>
<input type="text" value="0" onfocus="this.blur();" id="result"/>
</div>
<div>
<ul>
<li onclick="command(7);">7</li>
<li onclick="command(8);">8</li>
<li onclick="command(9);">9</li>
<li><-</li>
<li onclick="clearzero('j');">C</li>
<li onclick="command(4);">4</li>
<li onclick="command(5);">5</li>
<li onclick="command(6);">6</li>
<li onclick="tools('*','g');">×</li>
<li onclick="tools('/','g');">÷</li>
<li onclick="command(1);">1</li>
<li onclick="command(2);">2</li>
<li onclick="command(3);">3</li>
<li onclick="tools('+','g');">+</li>
<li onclick="tools('-','g');">-</li>
<li onclick="command(0);">0</li>
<li onclick="command(00);">00</li>
<li onclick="dot('g');">.</li>
<li onclick="tools('%','g');">%</li>
<li onclick="equal('j');">=</li>
<div></div>
</ul>
</div>
</div>
<script type="text/javascript" src=""></script>
<script>
/*
1.数字显示，数字拼接
2.点击操作符
3.点击数字
4.获取结果
5.不能连续输入
*/
//点击按钮执行操作
var resultDom = document.getElementById("result");
var operate = true;
var xop = true;
function command(num){
if(needclear==1){
needclear=0;
resultDom.value='';
}
var str = resultDom.value;
str =(str =="0"?"":str);
resultDom.value = str+num;
operate = true;
play(num);
}
//清空
function clearzero(m){
resultDom.value = 0;
play(m)
}
//计算等号
var needclear=0;
function equal(m){
needclear=1;
var result = resultDom.value.toString();
var r = eval(result);
resultDom.value =r;
play(m);
}
//小数点
function dot(m){
if(xop){
var num = resultDom.value.toString();
num +=".";
resultDom.value = num;
xop = ture;
}
play(m);
}
//点击操作符
function tools(op,m){
if(operate){
var num = resultDom.value;
num = (num =="0"?"":num);
resultDom.value = num+op;
operate = false;
}
play(m);
}
//按键声音
function play(num){
var audioDom = document.getElementById("audio");
audioDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>"
}
</script>
</body>
</html>Le code a été expliqué dans les chapitres précédents, et maintenant je vais le connecter ensemble pour vous montrer l'effet réel.
nouveau fichier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>计算器</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#ffffcc;
font-size:12px;
font-family:"微软雅黑";
color:#666;
}
ul,ol{list-style:none;}
.cac{
width:410px;
background:#399;
margin:0 auto;
}
.cac .c_title{
font-size:16px;
color:#000;
padding:10px 0 10px 10px;
cursor:move;
}
.cac .c_show .c_txt{
width:390px;
height:42px;
font-size:34px;
color:#999;
border:none;
outline:none;
text-align:right;
padding-right:20px;
line-height:25px;
}
.cac .c_key ul{
border:1px solid #fff
}
.cac .c_key ul li{
border:1px solid #fff;
width:69px;
height:50px;
font-size:25px;
margin:5px;
float:left;
background:#cccc33;
line-height:50px;
cursor:pointer;
text-align:center;
}
.cac .c_key .c_tool{
background:#3399cc;
}
.clear{clear:both;}
</style>
</head>
<body>
<div class="cac">
<div class="c_title">计算器</div>
<div class="c_show">
<input type="text" class="c_txt" value="0" onfocus="this.blur();" id="result"/>
</div>
<div class="c_key">
<ul>
<li onclick="command(7);">7</li>
<li onclick="command(8);">8</li>
<li onclick="command(9);">9</li>
<li class="c_tool"><-</li>
<li class="c_tool" onclick="clearzero('j');">C</li>
<li onclick="command(4);">4</li>
<li onclick="command(5);">5</li>
<li onclick="command(6);">6</li>
<li class="c_tool" onclick="tools('*','g');">×</li>
<li class="c_tool" onclick="tools('/','g');">÷</li>
<li onclick="command(1);">1</li>
<li onclick="command(2);">2</li>
<li onclick="command(3);">3</li>
<li class="c_tool" onclick="tools('+','g');">+</li>
<li class="c_tool" onclick="tools('-','g');">-</li>
<li onclick="command(0);">0</li>
<li onclick="command(00);">00</li>
<li onclick="dot('g');">.</li>
<li class="c_tool" onclick="tools('%','g');">%</li>
<li class="c_equ" onclick="equal('j');">=</li>
<div class="clear"></div>
</ul>
</div>
</div>
<script type="text/javascript" src=""></script>
<script>
/*
1.数字显示，数字拼接
2.点击操作符
3.点击数字
4.获取结果
5.不能连续输入
*/
//点击按钮执行操作
var resultDom = document.getElementById("result");
var operate = true;
var xop = true;
function command(num){
if(needclear==1){
needclear=0;
resultDom.value='';
}
var str = resultDom.value;
str =(str =="0"?"":str);
resultDom.value = str+num;
operate = true;
play(num);
}
//清空
function clearzero(m){
resultDom.value = 0;
play(m)
}
//计算等号
var needclear=0;
function equal(m){
needclear=1;
var result = resultDom.value.toString();
var r = eval(result);
resultDom.value =r;
play(m);
}
//小数点
function dot(m){
if(xop){
var num = resultDom.value.toString();
num +=".";
resultDom.value = num;
xop = ture;
}
play(m);
}
//点击操作符
function tools(op,m){
if(operate){
var num = resultDom.value;
num = (num =="0"?"":num);
resultDom.value = num+op;
operate = false;
}
play(m);
}
//按键声音
function play(num){
var audioDom = document.getElementById("audio");
audioDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>"
}
</script>
</body>
</html>
Aperçu
Clear
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
Parlons brièvement de la création d'une entreprise en PHP
Introduction rapide au développement web front-end
Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes
Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]
Vérification de connexion et forum de discussion classique
Collecte de connaissances sur les réseaux informatiques
Démarrage rapide de la version complète de Node.JS
Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]
Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)