练习地址:http://www.fgm.cc/learn/lesson3/07.html
抱歉,JavaScript部分暂时还实现不了,以后来补。网页源代码的JavaScript部分有两个正则表达式看不懂,希望朋友们可以指点迷津,感谢!
现在只做了Html和CSS部分。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>网页计算器</title>
<link rel="stylesheet" type="text/css" href="7_calculate.css">
</head>
<body>
<div id="container">
<div id="author">By-denguing QQ:2577028453</div>
<input id="show" type="
text" readonly="readonly" maxlength="9" value="0">
<input id="pre" type="text" readonly="readonly" value="">
<div id="btn">
<button class="function">C</button>
<button class="function">%</button>
<button class="function">÷</button>
<button class="function">×</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="function">-</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="function">+</button>
<button class="move">1</button>
<button class="move">2</button>
<button class="move">3</button>
<button class="calculate">=</button>
<button class="zero last">0</button>
<button class="last">.</button>
</div>
</div>
<script type="text/javascript" src="7_calculate.js"></script>
</body>
</html>
CSS
#container {
width: 295px;
margin: 0 auto;
background: #CCCCFF;
padding: 10px;
height: 335px;
border-radius: 3%;
}
#author {
color: white;
text-align: right;
font-size: 12px;
padding: 5px;
line-height: 6px;
height: 4px;
}
#show {
width: 310px;
height: 70px;
background: linear-gradient(to bottom,#FFCCCC,#FFFFCC);
margin: 10px 0;
position: relative;
left: -10px;
border-radius: 3%;
border: none;
text-align: right;
padding-right: 5px;
color: gray;
font-size: 26px;
}
button {
width: 60px;
height: 30px;
border: none;
margin: 8px 5px;
outline: none;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 5%;
background: linear-gradient(to bottom,#FFCCCC 50%,#FFFF99);
}
.function {
background: linear-gradient(to bottom,#FF9966 0%,#FFFF99);
}
.calculate {
height: 75px;
background: linear-gradient(to bottom,#FF6666 50%,#FFFF00);
}
.move {
position: relative;
top: -23px;
}
.zero {
width: 135px;
}
.last {
position: relative;
top: -46px;
}
button:hover {
background: linear-gradient(to top,#FFCCCC 50%,#FFFF99);
cursor: pointer;
}
.function:hover {
background: linear-gradient(to top,#FF9966 0%,#FFFF99);
}
.calculate:hover {
background: linear-gradient(to top,#FF6666 50%,#FFFF00);
}
#pre {
border:none;
background: transparent;
position: absolute;
top: 45px;
right: 530px;
height: 12px;
text-align: right;
font-size: 12px;
font-weight: bold;
}
孤独是人的终生旅途。