html+JavaScript+css 24点计算器

源代码 采用穷举计算方法

讲人话:根据四个数随机列算式,算出来是24就显示在列表里。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>24 Point Game</title>

<style>

body {

background: #f0f0f0;

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.game-container {

background: #fff;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

padding: 20px;

width: 400px;

}

h1 {

text-align: center;

color: #333;

}

inputtype="number" {

width: 100%;

padding: 10px;

margin-bottom: 10px;

border: none;

border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

}

button {

width: 100%;

padding: 10px;

background: #007bff;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}

button:hover {

background: #0056b3;

}

.results {

margin-top: 20px;

color: #333;

}

.results p {

margin: 5px 0;

}

</style>

</head>

<body>

<div class="game-container">

<h1>24 Point Game</h1>

<input type="number" id="num1" placeholder="Enter Number 1">

<input type="number" id="num2" placeholder="Enter Number 2">

<input type="number" id="num3" placeholder="Enter Number 3">

<input type="number" id="num4" placeholder="Enter Number 4">

<button οnclick="solve24Point()">Calculate</button>

<div class="results" id="results"></div>

</div>

<script>

function solve24Point() {

const numbers = [

parseFloat(document.getElementById('num1').value),

parseFloat(document.getElementById('num2').value),

parseFloat(document.getElementById('num3').value),

parseFloat(document.getElementById('num4').value)

];

const solutions = findSolutions(numbers);

displaySolutions(solutions);

}

function findSolutions(nums) {

const ops = '+', '-', '\*', '/';

const solutions = \[\];

const permutations = getPermutations(nums);

for (let perm of permutations) {

for (let op1 of ops) {

for (let op2 of ops) {

for (let op3 of ops) {

let expr = `({perm\[0\]} {op1} {perm\[1\]}) {op2} ({perm\[2\]} {op3} ${perm3})`;

let result = evalExpression(expr);

if (Math.abs(result - 24) < 0.01) {

solutions.push(`({perm\[0\]} {op1} {perm\[1\]}) {op2} ({perm\[2\]} {op3} {perm\[3\]}) = {result.toFixed(2)}`);

}

}

}

}

}

return solutions;

}

function getPermutations(arr) {

if (arr.length <= 2) return arr.length === 2 ? arr, \[arr\[1, arr0]] : arr;

return arr.reduce((acc, item, i) => acc.concat(

getPermutations(arr.slice(0, i).concat(arr.slice(i + 1)))

.map(x => item.concat(x))

), \[\]);

}

function evalExpression(expression) {

try {

return eval(expression);

} catch (e) {

return NaN;

}

}

function displaySolutions(solutions) {

const resultsDiv = document.getElementById('results');

resultsDiv.innerHTML = '';

if (solutions.length > 0) {

solutions.forEach(solution => {

resultsDiv.innerHTML += `<p>${solution}</p>`;

});

} else {

resultsDiv.innerHTML = '<p>No solution found.</p>';

}

}

</script>

</body>

</html>

相关推荐
迷迭绿1 小时前
Cesium 轨迹回放播放器
前端·javascript·cesium
HolySaga2 小时前
我用 UTS 写了一个三端同构的蓝牙插件(Android / iOS / 鸿蒙 NEXT),把踩过的坑都讲给你听
前端
程序员老赵2 小时前
Docker 部署 XWiki:轻松搭建企业知识库与协作 Wiki
前端·docker·开源
console.log('npc')2 小时前
第 10 章 更多业务模块扩展
前端·人工智能·大模型
物联网软硬件开发-轨物科技2 小时前
【轨物方案】深度解读开关柜智能感知及一键顺控专家系统
大数据·运维·网络·人工智能·算法·机器人
行者全栈架构师2 小时前
我用 TRAE Work 把桌游之夜搬进了浏览器:一个计分器的从创意到上线
前端·算法·架构
YFJ_mily2 小时前
【10-12月优质学术会议合集】会议覆盖人工智能、大数据、高端装备、软件与网络安全 、计算机视觉技术等热门方向
算法·安全·web安全·网络安全·软件·rdlink研发家
山雀~2 小时前
线上CI流水打包失败排查思路案例
前端·ci/cd
时间的情敌2 小时前
《回顾 2019 前端:React Hooks 问世,前端工程化爆发的一年》
前端·react.js·前端框架
燕落南枝2 小时前
CSS 类选择器详解:从入门到实战
前端·css