原生js实现一个计算器
代码语言:html
所属分类:表单美化
代码描述:原生js实现一个计算器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=Press+Start+2P&display=swap'>
<style>
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
body {
padding: 0;
margin: 0;
background-image: linear-gradient(to right, #bdc3c7 0%, #ecf0f1 40%, #ecf0f1 60%, #bdc3c7 100%);
}
.calculator {
width: 250px;
background-color: #2c3e50;
background-image: linear-gradient(to right, #334b63 0%, #4b6580 40%, #4b6580 60%, #334b63 100%);
border-width: 1px;
border-style: solid;
border-top-color: rgba(255, 255, 255, 0.6);
border-bottom-color: black;
border-right-color: black;
border-left-color: black;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), inset 0 0 3px 4px rgba(0, 0, 0, 0.5);
border-top: 4px solid rgba(255, 255, 255, 0.2);
}
/* Screen
-------------------------------*/
.screen-wrapper {
margin: 15px;
padding: 3px;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);
border-radius: 5px;
}
#screen {
height: 60px;
bac.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0