muzi
/
macUI
mirror of https://github.com/1099438829/macUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

演示app增加计算器

This commit is contained in:
liyukun 2022-03-16 10:25:51 +08:00
parent 14e8114e63
commit f8d2f43201
7 changed files with 177 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/calculator/audio.mp3 Normal file
View File

Binary file not shown.

54
app/calculator/index.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="screen-box">
<div class="input-box"></div>
<div class="output-box">0</div>
</div>
<div class="keyboard-box">
<div class="line">
<div data-key="AC" class="line-item grey-white">AC</div>
<div data-key="(" class="line-item grey-white">(</div>
<div data-key=")" class="line-item grey-white">)</div>
<div data-key="/" class="line-item orange">÷</div>
</div>
<div class="line">
<div data-key="7" class="line-item grey-black">7</div>
<div data-key="8" class="line-item grey-black">8</div>
<div data-key="9" class="line-item grey-black">9</div>
<div data-key="*" class="line-item orange">×</div>
</div>
<div class="line">
<div data-key="4" class="line-item grey-black">4</div>
<div data-key="5" class="line-item grey-black">5</div>
<div data-key="6" class="line-item grey-black">6</div>
<div data-key="-" class="line-item orange">-</div>
</div>
<div class="line">
<div data-key="1" class="line-item grey-black">1</div>
<div data-key="2" class="line-item grey-black">2</div>
<div data-key="3" class="line-item grey-black">3</div>
<div data-key="+" class="line-item orange">+</div>
</div>
<div class="line">
<div data-key="0" class="line-item grey-black">0</div>
<div data-key="." class="line-item grey-black">.</div>
<div data-key="=" class="line-item orange">=</div>
</div>
</div>
<audio src="./sound.mp3"></audio>
</div>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<script src="./index.js"></script>
</body>
</html>

34
app/calculator/index.js Normal file
View File

@ -0,0 +1,34 @@
var inputTxt = ''
var outputTxt = ''
//add event listening
$('.line-item').on('click',e=>{
// console.log('here')
playSoud()
var key = e.target.dataset.key
console.log(key)
switch(key){
case '=':
try{
outputTxt = eval(inputTxt)
}catch(e){
outputTxt = 'error'
}
break;
case 'AC':
//clear all inputs and outputs
inputTxt = ''
outputTxt = '0'
break;
default:
inputTxt += key
}
//update the view
updateView()
})
function playSoud(){
$('audio')[0].play()
}
function updateView(){
$('.input-box').html(inputTxt)
$('.output-box').html(outputTxt)
}

BIN
app/calculator/sound.mp3 Normal file
View File

Binary file not shown.

84
app/calculator/style.css Normal file
View File

@ -0,0 +1,84 @@
@charset "utf-8";
body,a,h1,h2,h3,h4,h5,h6,p,div,em,ul,li {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
html {
height: 100%;
}
/*去除ul中li左边的圆点*/
ul{
list-style: none;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
width: 100%;
background-color: black;
overflow: hidden;
}
.container{
background-color: black;
width: 350px;
padding:20px;
}
.screen-box{
text-align: right;
color:white;
}
.input-box{
font-size:30px;
height:40px;
line-height: 40px;
overflow: hidden;
}
.output-box{
font-size:48px;
height:56px;
line-height: 56px;
overflow: hidden;
}
/* keyboard style */
.line{
display: flex;
justify-content: space-between;
text-align: center;
margin-bottom:10px;
}
.line > div{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
color: white;
border-radius: 80px;
font-size: 25px;
cursor: pointer;
}
[data-key="0"]{
width: 168px !important;
}
.grey-white{
background-color: #a5a5a5;
color:black;
}
.grey-white:hover{
background-color: #cccaca;
}
.orange{
background-color: #ff9f0c;
color:white;
}
.orange:hover{
background-color: #ffbb54;
}
.grey-black{
background-color: #333333;
color:white;
}
.grey-black:hover{
background-color: #747373;
}

8
demo.html
View File

@ -45,12 +45,14 @@
<img class="icon" src="./img/icon/gamecenter.png" /> <img class="icon" src="./img/icon/gamecenter.png" />
<div class="title">GameCenter</div> <div class="title">GameCenter</div>
</div> </div>
<div class="shortcut" <div class="shortcut" onclick="Win10.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])">
onclick="Win10.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])">
<img class="icon" src="./img/icon/calendar.png" /> <img class="icon" src="./img/icon/calendar.png" />
<div class="title">Calendar</div> <div class="title">Calendar</div>
</div> </div>
<div class="shortcut" onclick="Win10.openUrl('./app/calculator','<img class=\'icon\' src=\'./img/icon/calculator.png\'/>','Calculator',[['387px','613px'],'auto'])">
<img class="icon" src="./img/icon/calculator.png" />
<div class="title">Calculator</div>
</div>
<div class="shortcut" onclick="window.open('https://www.icloud.com/')"> <div class="shortcut" onclick="window.open('https://www.icloud.com/')">
<img class="icon" src="./img/icon/icloud.png" /> <img class="icon" src="./img/icon/icloud.png" />
<div class="title">iCloud</div> <div class="title">iCloud</div>

BIN
img/icon/calculator.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB