计算器
HTML与CSS部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Javascript Calculator</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
body {
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: aqua;
}
.calculator {
background: yellow;
border-radius: 5px;
padding: 5px;
width: 300px;
min-width: 300px;
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4),
4px 4px 10px rgba(0, 0, 0, 0.7);
}
.output {
display: flex;
flex-direction: column;
align-items: flex-end;
position: relative;
background: #ffffff;
min-height: 50px;
padding: 5px;
margin: 0 1px 10px;
border-radius: 0.25rem;
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.output pre {
text-align: right;
font-size: 25px;
margin: 0;
font-family: 'Orbitron', sans-serif;
width: 288px;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.output pre::-webkit-scrollbar {
display: none;
}
.output #upper {
color: #424242;
font-size: 18px;
}
.input {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.input button {
width: calc(25% - 24px);
height: 50px;
margin: 8px 12px;
border-radius: 50%;
background-color: #c05d5d;
box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
1px 1px 5px rgba(94, 31, 31, 0.7);
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
outline: none;
border: none;
}
.input button:hover {
background-color: #b35555;
}
.input button:active {
box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),
inset -1px -1px 2px rgba(255, 255, 255, 0.3);
color: #642929;
}
</style>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="output">
<pre id="upper"></pre>
<pre id="lower">0</pre>
</div>
<div class="input">
<button onclick="pressAllClear()">AC</button>
<button onclick="pressNum(this)">0</button>
<button onclick="pressClear()"><i class="fas fa-backspace"></i></button>
<button onclick="pressOperator(this)">+</button>
<button onclick="pressNum(this)">1</button>
<button onclick="pressNum(this)">2</button>
<button onclick="pressNum(this)">3</button>
<button onclick="pressOperator(this)">-</button>
<button onclick="pressNum(this)">4</button>
<button onclick="pressNum(this)">5</button>
<button onclick="pressNum(this)">6</button>
<button onclick="pressOperator(this)">×</button>
<button onclick="pressNum(this)">7</button>
<button onclick="pressNum(this)">8</button>
<button onclick="pressNum(this)">9</button>
<button onclick="pressOperator(this)">÷</button>
<button onclick="pressDot()">.</button>
<button onclick="pressBracket(this)">(</button>
<button onclick="pressBracket(this)">)</button>
<button onclick="pressEqual()">=</button>
</div>
</div>
</div>
JavaScript部分:
<script>
// javascript calculator
// upper output is for showing the expression
let outputUpper = document.querySelector('#upper');
// lower output is for showing the result
let outputLower = document.querySelector('#lower');
// function to get number input
function pressNum(e) {
if (outputLower.innerHTML === '0') {
outputLower.innerHTML = e.innerHTML;
} else {
outputLower.innerHTML += e.innerHTML;
}
}
// clear all
function pressAllClear() {
outputUpper.innerHTML = '';
outputLower.innerHTML = '0';
}
// clear one
function pressClear() {
outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
}
// calculate button
function pressEqual() {
let exp = outputLower.innerHTML;
outputUpper.innerHTML = exp;
exp = exp.replace(/×/g, '*').replace(/÷/g, '/');
let result;
try {
result = eval(exp);
// if decimal number more than 4 decimal places
if (result.toString().indexOf('.') !== -1) {
result = result.toFixed(4);
}
} catch (e) {
result = 'Error';
}
outputLower.innerHTML = result;
}
function pressOperator(e) {
// check last operator
let lastOperator = outputLower.innerHTML.slice(-1);
if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {
output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;
} else {
outputLower.innerHTML += e.innerHTML;
}
}
function pressDot() {
outputLower.innerHTML += '.';
}
function pressBracket(e) {
outputLower.innerHTML += e.innerHTML;
}
// attach keyboard event
document.addEventListener('keydown', function (e) {
switch (e.key) {
case '0':
pressNum(document.querySelector('button:nth-child(2)'));
break;
case '1':
pressNum(document.querySelector('button:nth-child(5)'));
break;
case '2':
pressNum(document.querySelector('button:nth-child(6)'));
break;
case '3':
pressNum(document.querySelector('button:nth-child(7)'));
break;
case '4':
pressNum(document.querySelector('button:nth-child(9)'));
break;
case '5':
pressNum(document.querySelector('button:nth-child(10)'));
break;
case '6':
pressNum(document.querySelector('button:nth-child(11)'));
break;
case '7':
pressNum(document.querySelector('button:nth-child(13)'));
break;
case '8':
pressNum(document.querySelector('button:nth-child(14)'));
break;
case '9':
pressNum(document.querySelector('button:nth-child(15)'));
break;
case '+':
pressOperator(document.querySelector('button:nth-child(4)'));
break;
case '-':
pressOperator(document.querySelector('button:nth-child(8)'));
break;
case '*':
pressOperator(document.querySelector('button:nth-child(12)'));
break;
case '/':
pressOperator(document.querySelector('button:nth-child(16)'));
break;
case '.':
pressDot();
break;
case '(':
pressBracket(document.querySelector('button:nth-child(18)'));
break;
case ')':
pressBracket(document.querySelector('button:nth-child(19)'));
break;
case 'Enter':
// prevent default action
e.preventDefault();
pressEqual();
break;
case 'Backspace':
pressClear();
break;
case 'Escape':
pressAllClear();
break;
}
});
</script>
效果图如下:
网页时钟
HTML与CSS部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子时钟</title>
<!-- 定义样式 -->
<style>
body {
background-image: url(壁纸.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.box {
width: 300px;
height: 150px;
margin: 20px auto;
}
.oneDay {
height: 100px;
width: 100%;
color: black;
font-size: 60px;
font-weight: 600;
text-align: center;
line-height: 100px;
}
.month {
height: 50px;
width: 100%;
color: black;
font-size: large;
text-align: center;
letter-spacing: 2px
}
</style>
</head>
<body>
<div class="box"> <!-- 创建一个div容器,设置样式为.box -->
<div class="oneDay"></div> <!-- 在盒子中创建一个div,设置样式为.oneDay -->
<div class="month"></div> <!-- 在盒子中创建一个div,设置样式为.month -->
</div>
JavaScript部分:
<script>
const day = [ '一', '二', '三', '四', '五', '六','日'] // 定义一个数组day,包含了一周中每一天的汉字表示
setInterval(function () { // 创建一个定时器
const date = new Date() // 获取当前时间并存储在变量date中
let nowHours = date.getHours() // 获取当前时间的小时数
const nowMinutes = date.getMinutes() // 获取当前时间的分钟数
let nowSecond = date.getSeconds() // 获取当前时间的秒数
nowHours = nowHours < 10 ? '0' + nowHours : nowHours // 如果当前小时数小于10,则在前面添加0
nowSecond = nowSecond < 10 ? '0' + nowSecond : nowSecond // 如果当前秒数小于10,则在前面添加0
// 将当前时间显示在.oneDay的div容器中
document.querySelector('.oneDay').innerHTML = `${nowHours}:${nowMinutes}:${nowSecond}`
}, 1000) // 设置定时器的时间间隔为1000毫秒
setInterval(function () { // 创建另一个定时器
const date = new Date() // 获取当前时间并存储在变量date中
const nowMonth = date.getMonth() // 获取当前月份
const nowDate = date.getDate() // 获取当前日期
const nowDay = date.getDay() // 获取当前星期几对应的数字
// 将当前日期和星期几以及月份显示在.month的div容器中
document.querySelector('.month').innerHTML = `${nowMonth + 1}月${nowDate}日 星期${day[nowDay-1]}`
}, 1000) // 设置定时器的时间间隔为1000毫秒
</script>
效果图如下: