计算器的实现
1.先创建计算器的外表，html使用表格创建基本布局，再用css进行装饰。
<table class="jisuanqitable">
<thead>
<tr>
<td colspan="4" class="th"><input type="text" id="result"></td>
</tr>
</thead>
<tbody class="tb">
<tr>
<td><button style="margin-top: 10px; background-color: #dee2ee;" onclick="getChar('(')">(</button></td>
<td><button style="margin-top: 10px;background-color: #dee2ee;" onclick="getChar(')')">)</button></td>
<td><button style="margin-top: 10px;background-color: #dee2ee;" onclick="getChar('%')">%</button></td>
<td><button style="margin-right: 0; margin-top: 10px;background-color: #ffb636;"
onclick="getChar('AC')">AC</button></td>
</tr>
<tr>
<td><button onclick="getChar('7')">7</button></td>
<td><button onclick="getChar('8')">8</button></td>
<td><button onclick="getChar('9')">9</button></td>
<td><button style="margin-right: 0;background-color: #dee2ee; " onclick="getChar('/')">/</button></td>
</tr>
<tr>
<td><button onclick="getChar('4')">4</button></td>
<td><button onclick="getChar('5')">5</button></td>
<td><button onclick="getChar('6')">6</button></td>
<td><button style="margin-right: 0;background-color: #dee2ee;" onclick="getChar('*')">*</button></td>
</tr>
<tr>
<td><button onclick="getChar('1')">1</button></td>
<td><button onclick="getChar('2')">2</button></td>
<td><button onclick="getChar('3')">3</button></td>
<td><button style="margin-right: 0;background-color: #dee2ee;" onclick="getChar('-')">-</button></td>
</tr>
<tr>
<td><button onclick="getChar('0')">0</button></td>
<td><button onclick="getChar('.')">.</button></td>
<td><button style="background-color: #5170fe;" onclick="getChar('=')">=</button></td>
<td><button style="margin-right: 0;background-color: #dee2ee;" onclick="getChar('+')">+</button></td>
</tr>
</tbody>
</table>
.jisuanqitable {
background-color: #f2f2f7;
width: 400px;
border-radius: 10px;
margin-top: 90px;
margin-left: 150px;
box-shadow: -2px -2px 5px 0px #c2c2ca, 2px 2px 5px 0px #c2c2ca;
}
.th input {
background-color: #fdfdfd;
width: 420px;
height: 110px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: #fdfdfd;
box-shadow: 2px 2px 5px #c2c2ca, -2px -2px 5px 0px #c2c2ca;
color: rgb(86, 82, 82);
font-size: 45px;
line-height: 110px;
}
.tb button {
width: 96px;
height: 60px;
border-width: 1px;
border-style: solid;
border-color: #fdfdfd;
background-color: #fdfdfd;
padding: 0px;
border-radius: 10px;
box-shadow: 2px 2px #c2c2ca;
font-weight: 700px;
font-size: 20px;
}
.tb tr td button {
margin-right: 10px;
}
2.实现计算功能，这里运用js给每个按键创造点击事件，运算功能则通过eval函数来实现。
var buttons = document.querySelectorAll('button')
function getChar(btnid) {
switch (btnid) {
case '+':
setNum('+')
break;
case '-':
setNum('-')
break;
case '*':
setNum('*')
break;
case '/':
setNum('/')
break;
case '0':
setNum('0')
break;
case '1':
setNum('1')
break;
case '2':
setNum('2')
break;
case '3':
setNum('3')
break;
case '4':
setNum('4')
break;
case '5':
setNum('5')
break;
case '6':
setNum('6')
break
case '7':
setNum('7')
break;
case '8':
setNum('8')
break;
case '9':
setNum('9')
break;
case '(':
setNum('(')
break;
case ')':
setNum(')')
break;
case '%':
setNum('%')
break;
case 'AC':
setNum('AC')
clear1()
break;
case '=':
getResult()
break;
case '.':
setNum('.')
break;
}
}
function setNum(charCode) {
var origin = document.getElementById('result');
origin.value += charCode;
origin.innerText = origin.value;
}
function clear1() {
document.getElementById('result').value = "";
}
function getResult() {
var res1 = document.getElementById("result").value;
var res2 = eval(res1);
console.log(res1);
console.log(res2);
setNum('=')
setNum(res2)
}
随机谚语
1.建构盒子装文字，用浮动进行布局
<div class="divhead">随 机 谚 语</div>
.divhead {
height: 100px;
background-color: rgba(0, 0, 0, 0.3);
line-height: 100px;
text-align: center;
box-shadow: 3px 3px #ccccd4;
font-size: 50px;
width: 100%;
position: absolute;
bottom: 0;
border-radius: 10px;
color: rgb(228, 228, 204);
}
2.利用Math.floor(Math.random() * quoteArr.length)可以获取随机数，然后把谚语放在一个数组里，即可获取随机谚语。利用js创造事件，使当刷新或点击盒子是可以刷新谚语。
function getQuote() {
var quoteArr = [
"挨金似金，挨玉似玉。",
"八成熟，十成收；十成熟，二成丢。",
"把舵的不慌，乘船的稳当。",
"白米饭好吃，五谷田难种。",
"白米饭好吃，五谷田难种。",
"百闻不如一见，百见不如一干。",
"败家子挥金如粪，兴家人惜粪如金。",
"帮人要帮到底，救人要救到头。",
"饱带饥粮，晴带雨伞。",
"爆饮爆食易生病，定时定量保康宁。",
"背后不商量，当面无主张。",
"笨人先起身，笨鸟早出林。",
"鞭打的快马，事找的忙人。",
"边学边问，才有学问。",
"病从口入，寒从脚起。",
];
return quoteArr[Math.floor(Math.random() * quoteArr.length)];
}
var divhead = document.querySelector(".divhead");
divhead.onclick = function () {
console.log(1);
// var quotes = getQuote();
// console.log(quotes);
divhead.innerHTML = '谚语:' + getQuote();
}
window.onload = function () {
console.log(1);
// var quotes = getQuote();
// console.log(quotes);
divhead.innerHTML = '谚语:' + getQuote()
}
网页时钟
1.布局：一个大盒子里包含三个小盒子的方式来布局。再用css进行装饰
<div class="box">
<p class="timep">现在时间</p>
<div class="div">123</div>
<div class="div1">123</div>
</div>
.timep {
margin: 0;
text-align: center;
padding-top: 30px;
}
.box {
position: absolute;
top: 10px;
right: 10px;
font-size: 17px;
font-weight: 700px;
color: rgb(132, 11, 33);
font-weight: 900px;
box-shadow: 2px 2px 5px #c2c2ca, -2px -2px 5px 0px #c2c2ca;
text-align: center;
width: 300px;
height: 130px;
border-radius: 65px;
}
.div {
font-size: 22px;
}
.div1 {
text-align: center;
padding-bottom: 30px;
}
2.利用js获取实时的时间，利用bom的定时器使时间每隔一秒变化
var div = document.querySelector('.div')
var div1 = document.querySelector('.div1')
getDate()
window.setInterval(getDate, 1000);
window.setInterval(getDate1,);
div1.innerHTML = getDate1()
function getDate() {
var date = new Date
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var hours = date.toLocaleTimeString('chinese', { hour12: false });
// var hours = date.getHours()
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
div.innerText = year + '年' + month + '月' + dates + '日 ' + hours;
}
function getDate1() {
var date = new Date
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var hours = date.toLocaleTimeString('chinese', { hour12: false });
// var minutes = date.getMinutes();
// var seconds = date.getSeconds();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
// div1.innerText = arr[day];
div1.innerText = arr[day];
}
星级评分
1.利用一个盒子里面装五张照片来布局，再加css装饰
<div class="divright">
<div class="divright1">今 日 评 分:</div>
<div>
<img src="images/微信图片_20240119054057.jpg" alt="" class="img1">
<img src="images/微信图片_20240119054057.jpg" alt="" class="img2">
<img src="images/微信图片_20240119054057.jpg" alt="" class="img3">
<img src="images/微信图片_20240119054057.jpg" alt="" class="img4">
<img src="images/微信图片_20240119054057.jpg" alt="" class="img5">
</div>
</div>
.divright1 {
margin-top: 10px;
margin-left: 7px;
height: 12px;
}
.divright div img {
margin-top: 12px;
margin-left: 5px;
}
2.js创造了一个事件，当点击星星时照片会发生变化，这里使用了一个if和flag的配合，实现既可以点亮又可以取消。
var img1 = document.querySelector('.img1')
var img2 = document.querySelector('.img2')
var img3 = document.querySelector('.img3')
var img4 = document.querySelector('.img4')
var img5 = document.querySelector('.img5')
var flag1 = 0;
var flag2 = 0;
var flag3 = 0;
var flag4 = 0;
var flag5 = 0;
img1.onclick = function () {
if (flag1 == 0) {
this.src = 'images/微信图片_20240119054105.jpg';
flag1 = 1;
} else {
this.src = 'images/微信图片_20240119054057.jpg';
flag1 = 0
}
};
img2.onclick = function () {
if (flag2 == 0) {
this.src = 'images/微信图片_20240119054105.jpg';
flag2 = 1;
} else {
this.src = 'images/微信图片_20240119054057.jpg';
flag2 = 0
}
};
img3.onclick = function () {
if (flag3 == 0) {
this.src = 'images/微信图片_20240119054105.jpg';
flag3 = 1;
} else {
this.src = 'images/微信图片_20240119054057.jpg';
flag3 = 0
}
};
img4.onclick = function () {
if (flag4 == 0) {
this.src = 'images/微信图片_20240119054105.jpg';
flag4 = 1;
} else {
this.src = 'images/微信图片_20240119054057.jpg';
flag4 = 0
}
};
img5.onclick = function () {
if (flag5 == 0) {
this.src = 'images/微信图片_20240119054105.jpg';
flag5 = 1;
} else {
this.src = 'images/微信图片_20240119054057.jpg';
flag5 = 0
}
};
井字棋
1.布局：利用盒子里包含十个盒子的方式来布局，再加css进行修饰。
<div class="jingdiv">
<p class="jingp">Tic TAC Toe</p>
<div class="jing1" style="border-top: none;border-left: none;"></div>
<div class="jing2" style="border-top: none;"></div>
<div class="jing3" style="border-top: none;border-right: none;"></div>
<div class="jing4" style="border-left: none;"></div>
<div class="jing5"></div>
<div class="jing6" style="border-right: none;"></div>
<div class="jing7" style="border-left: none;border-bottom: none;"></div>
<div class="jing8" style="border-bottom: none;"></div>
<div class="jing9" style="border-bottom: none;border-right: none;"></div>
</div>
.jingdiv {
position: absolute;
top: 80px;
right: 400px;
width: 462px;
height: 562px;
/* border-width: 1px;
border-style: solid; */
box-shadow: 2px 2px 5px #c2c2ca, -2px -2px 5px 0px #c2c2ca;
border-radius: 10px;
}
.jingdiv p {
width: 462px;
height: 100px;
background-color: #faf2e5;
margin: 0;
text-align: center;
line-height: 100px;
font-size: 50px;
color: #447a9e;
font-weight: 700px;
}
.jingdiv div {
float: left;
width: 150px;
height: 150px;
border: 3px solid #576663;
display: inline-block;
background-color: #faf2e5;
font-size: 70px;
text-align: center;
line-height: 150px;
}
2.实现井字棋的功能：先创造一个空数组，给井字棋的每个按键创造事件，空数组与按键里的内容一一对应，循环看那个按键被点击，然后检查该按键对应数组位置内容是否为空，为空则放当前玩家的标志，然后切换玩家
检查游戏是否成功，在数组中检查是否行，列，对角三个成一行，则返回获胜玩家的标记，如果没有人成功，则返回null
var jing1 = document.querySelector('.jing1')
// obtainNum(jing1)
var jing2 = document.querySelector('.jing2')
// obtainNum(jing2)
var jing3 = document.querySelector('.jing3')
// obtainNum(jing3)
var jing4 = document.querySelector('.jing4')
// obtainNum(jing4)
var jing5 = document.querySelector('.jing5')
// obtainNum(jing5)
var jing6 = document.querySelector('.jing6')
// obtainNum(jing6)
var jing7 = document.querySelector('.jing7')
// obtainNum(jing7)
var jing8 = document.querySelector('.jing8')
// obtainNum(jing8)
var jing9 = document.querySelector('.jing9')
var board = new Array(9).fill(null); // 初始化board数组
var currentPlayer = 'O'; // 当前玩家，从'O'开始
var jingp = document.querySelector('.jingp'); // 游戏结束消息的元素
// 假设jing1到jing9是已经获取的DOM元素
var jings = [jing1, jing2, jing3, jing4, jing5, jing6, jing7, jing8, jing9];
// 为每个格子设置点击事件
for (var i = 0; i < jings.length; i++) {
(function (index) {
jings[index].onclick = function () {
if (board[index] === null) { // 检查该位置是否为空
board[index] = currentPlayer; // 放置当前玩家的标记
// 更新DOM显示
this.innerText = currentPlayer;
this.style.color = currentPlayer === 'O' ? '#02abc8' : '#85c202';
// 切换玩家
currentPlayer = currentPlayer === 'O' ? 'X' : 'O';
// 检查游戏是否结束
if (checkWin()) {
jingp.innerText = '游戏结束了，' + checkWin() + '赢了';
disableButtons(); // 禁用所有按钮以防止进一步点击
}
}
};
})(i);
}
// 检查是否有玩家获胜
function checkWin() {
// 检查行、列和对角线是否有三个连续的相同标记
for (var i = 0; i < 3; i++) {
if (
board[i * 3] !== null &&
board[i * 3] === board[i * 3 + 1] &&
board[i * 3] === board[i * 3 + 2] // 检查行
) {
return board[i * 3]; // 返回获胜的玩家标记
}
if (
board[i] !== null &&
board[i] === board[i + 3] &&
board[i] === board[i + 6] // 检查列
) {
return board[i]; // 返回获胜的玩家标记
}
}
// 检查对角线
if (
board[0] !== null &&
board[0] === board[4] &&
board[0] === board[8] // 主对角线
) {
return board[0]; // 返回获胜的玩家标记
}
if (
board[2] !== null &&
board[2] === board[4] &&
board[2] === board[6] // 副对角线
) {
return board[2]; // 返回获胜的玩家标记
}
// 如果没有玩家获胜，返回null
return null;
}
// 禁用所有按钮
function disableButtons() {
for (var i = 0; i < jings.length; i++) {
jings[i].disabled = true;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
