html+JavaScript+css 24点计算器

最新推荐文章于 2024-07-22 13:57:13 发布
最新推荐文章于 2024-07-22 13:57:13 发布
阅读量1.2k 收藏 8
点赞数 14
文章标签： html css javascript 前端 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w11111xxxl/article/details/140138258
版权

源代码       采用穷举计算方法

讲人话：根据四个数随机列算式，算出来是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;
    }
    input[type="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} ${perm[3]})`;
                    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], arr[0]]] : 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>

 

睿智的海鸥
关注
  • 14
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
HTML+JAVAScript计算器
12-01
HTML+JavaScript计算器是一种基于网页的计算工具，利用HTML（超文本标记语言）构建用户界面，JavaScript处理用户交互和计算逻辑。在这个项目中，HTML用于创建计算器的布局和按钮，而JavaScript则赋予这些按钮功能，...
HTML+CSS+Javascript实现计算器
m0_60631211的博客
09-29 736
​ 从这个开发计算器的小项目，我学会了如何利用HTML和CSS来设计一个美观的可视化界面，学会了js中事件的联系，懂得了如何在github上创建仓库和在如何本地上传文件到仓库中，此外，意外的收获是自己学会了如何利用jest去测试自己的代码和覆盖率。当点击等号时，对特殊的运算符进行处理，js自带的eval函数对表达式进行运算，并对可能出现的小数精度问题进行处理，用正则法则处理表达式中出现的反三角函数。将点击的数字和符号添加到要计算的表达式和显示的表达式中，并在处理符号函数中对三角和反三角函数进行特殊处理。
HTML+CSS+JavaScript写计算器
JIAY_WX的博客
07-21 1204
计算器
使用html+css+javaScript 完成计算器
weixin_69252724的博客
04-14 715
点击数字按键并不能将按键的内容放到文本域里。如果foreach忘记的兄弟们。
HTML5+CSS3+JavaScript+JQuery写个计算器
qq_47665717的博客
03-30 148
第一次写，功能不太完善...
HTML + CSS + javascript 实现web版计算器
qq_39330735的博客
11-11 1632
一个简单的HTML计算器，有代码详解注释，这里运用了javascript，需要搭建相应的java环境，就Visual Studio Code的丢进去就可以运行
前端案例：简易计算器（html+css+JavaScript）
qq_45831018的博客
09-19 4902
本文章介绍了使用HTML+CSS+JavaScript制作一个简易计算器。
HTML+CSS+Javascript+Flask实现前后端交互计算器
2301_78936942的博客
10-22 764
也学到了如何设计并管理一个简单的数据库用于存储利率信息，在操作过程中加深了对HTML、CSS和JavaScript的理解，并学会了如何将它们结合起来构建一个完整的前端应用。鉴于这次项目要求前后端交互，我决定使用HTML、CSS和JavaScript作为实现工具，根据原型图先实现静态界面，这样做的好处是能够更灵活地控制界面的设计和交互效果。例如，下图展示了存款利率的修改和存款利率计算两个功能，当用户切换到某个功能时，对应的按钮会变为灰色，以便用户清晰地知道当前所处的功能模块。输出计算后的存款或贷款利息。
HTML+CSS+JavaScript制作简易计算器
qq_64867440的博客
12-06 1126
最后，通过 `resultObj.value = result` 代码将 `result` 的值赋给文本框元素的 `value` 属性，从而将计算结果显示在了该文本框中。最后，使用 `document.getElementById()` 方法获取到页面中 ID 为 `resultId` 的元素，将 `result` 的值赋值给该元素的 `value` 属性，从而将计算结果显示在页面中。函数中的 `num1` 和 `num2` 分别表示两个输入框的值，即被计算的两个数。
HTML5+JavaScript+CSS3 房贷计算器.rar
04-14
在这个“HTML5+JavaScript+CSS3 房贷计算器”项目中，开发者利用这些技术创建了一个实用的房贷计算工具，可以方便地帮助用户理解并计算商业贷款和公积金贷款的各种还款方式。 首先，HTML5作为结构化语言，提供了更...
基于JavaScript+HTML+CSS+js的静态网页计算器源码+项目说明.zip
12-17
基于JavaScript+HTML+CSS+js的静态网页计算器源码+项目说明.zip 基于JavaScript+HTML+CSS+js的静态网页计算器源码+项目说明.zip 基于JavaScript+HTML+CSS+js的静态网页计算器源码+项目说明.zip
原生态js计算器html+css+js
09-10
这个项目是一个基于JavaScript、HTML和CSS构建的简单计算器，它展示了如何使用这些核心技术来实现一个交互式的用户界面。JavaScript是网页动态功能的核心，而HTML和CSS则用于构建网页结构和样式。以下是这个计算器...
html--图片变化
2301_81140745的博客
07-20 413
2.点击上传图片会有变化。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 665
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 772
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
前端学习（二）之HTML
2302_79795489的博客
07-18 950
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
HTML启动本地EXE的通用方法
最新发布
07-22 497
HTML启动本地应用的解决方案
html+js+css计算器
06-09
好的，以下是一个简单的 HTML、CSS、JavaScript 实现的计算器： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calculator"> <div class="display"> <input type="text" id="result" disabled> </div> <div class="buttons"> <button onclick="clearResult()">C</button> <button onclick="backspace()">←</button> <button onclick="insertValue('%')">%</button> <button onclick="insertValue('/')">÷</button> <button onclick="insertValue('7')">7</button> <button onclick="insertValue('8')">8</button> <button onclick="insertValue('9')">9</button> <button onclick="insertValue('*')">x</button> <button onclick="insertValue('4')">4</button> <button onclick="insertValue('5')">5</button> <button onclick="insertValue('6')">6</button> <button onclick="insertValue('-')">-</button> <button onclick="insertValue('1')">1</button> <button onclick="insertValue('2')">2</button> <button onclick="insertValue('3')">3</button> <button onclick="insertValue('+')">+</button> <button onclick="insertValue('0')">0</button> <button onclick="insertValue('.')">.</button> <button onclick="calculate()">=</button> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码： ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f2f2f2; font-size: 16px; font-family: Arial, sans-serif; } .calculator { margin: 50px auto; width: 300px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .display { padding: 10px; border-bottom: 1px solid #ccc; } .display input { width: 100%; border: none; font-size: 20px; text-align: right; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; } .buttons button { padding: 10px; font-size: 20px; background-color: #f2f2f2; border: none; cursor: pointer; } .buttons button:hover { background-color: #ddd; } ``` JavaScript 代码： ``` let result = document.getElementById('result'); function insertValue(val) { result.value += val; } function clearResult() { result.value = ''; } function backspace() { result.value = result.value.slice(0, -1); } function calculate() { let expression = result.value; if (expression) { result.value = eval(expression); } } ``` 该计算器实现了加减乘除四则运算、百分比计算、清除、删除、等于号计算和小数点输入的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值