Web课外练习4

已于 2024-04-14 22:12:32 修改
阅读量206 收藏
点赞数 3
文章标签： 前端 javascript css
于 2024-04-14 22:05:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74021012/article/details/137756055
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>没啥实力的计算器设计</title>
    <style>
        .waiwei{
            border: 2px solid black;
            margin: auto;
        }
        .toubu {
            margin: auto; 
            
        }
        .xianshi{
            width: 210px;
        }
        #func{
            background-color:#E15572;
            border: 0cap;
            color: aliceblue;
            border-radius: 3px;
            width: 70px;
            height: 25px;
        }
        .kongge{
            width: 90px;
        }
        .kongge1{
            width: 25px;
        }
        .js{
            border-radius: 3px;
            width: 70px;
        }
    </style>
</head>
<body>
    <table class="waiwei">
        <th>
        <table class="toubu">
            <tr>
                <td class="title">
                    网页版计算器
                </td>
            </tr>
        </table>
        <table class="sub">
            <tr>
                <td colspan="2">
                    <input type="text" class="xianshi" placeholder="POWER OFF">
                </td>
                <td>
                    <input type="button" value="power" id="func" class="js">
                </td>
            </tr>
        </table>
        <table class="yunsuan">
            <tr></tr>
            <tr>
                <td class="kongge1"></td>
                <td class="f1">
                    <input type="button" value="clear" id="func" class="js">
                </td>
                <td class="kongge"></td>
                <td class="f2">
                    <input type="button" value="back" id="func" class="js">
                </td>
            </tr>
        </table>
        <table class="anniu">
            <tr></tr>
            <tr>
                <td>
                    <input type="button" value="1" class="js">
                </td>
                <td>
                    <input type="button" value="2" class="js">
                </td>
                <td>
                    <input type="button" value="3" class="js">
                </td>
                <td>
                    <input type="button" value="4" class="js">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="5" class="js">
                </td>
                <td>
                    <input type="button" value="6" class="js">
                </td>
                <td>
                    <input type="button" value="7" class="js">
                </td>
                <td>
                    <input type="button" value="8" class="js">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="9" class="js">
                </td>
                <td>
                    <input type="button" value="0" class="js">
                </td>
                <td>
                    <input type="button" value="." class="js">
                </td>
                <td>
                    <input type="button" value="=" class="js">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="+" class="js">
                </td>
                <td>
                    <input type="button" value="-" class="js">
                </td>
                <td>
                    <input type="button" value="*" class="js">
                </td>
                <td>
                    <input type="button" value="/" class="js">
                </td>
            </tr>
        </table>
        </th>
    </table>
    <script>
        var display = document.querySelector('.xianshi');
        var operators = {
            '+': function(x, y) { return x + y; },
            '-': function(x, y) { return x - y; },
            '*': function(x, y) { return x * y; },
            '/': function(x, y) { return y ? x / y : 'Error'; }
        };
        var count=0;
        var flag=0;
        function countpower(){
            count+=1;
            if(count%2==0||count==0){
                display.value='';
                flag=0;
            }
            else{
                display.value='0';
            }
        }
        function updateDisplay(value) {
            display.value += value;
        }

        function clearDisplay() {
            display.value = '0';
        }

        function evaluate() {
            try {
                var result = eval(display.value);
                if (!isNaN(result)) {
                    display.value = result;
                } else {
                    display.value = 'Error';
                }
            } catch (e) {
                display.value = 'Error';
            }
        }
        function handleButtonClick(event) {
            var buttonValue = event.target.value;
            if (buttonValue=='power'){
                countpower();
            }
            if(count%2!=0){
            if (buttonValue === 'clear') {
                clearDisplay();
            } else if (buttonValue === 'back') {
                display.value = display.value.slice(0, -1);
            } else if (buttonValue === '=') {
                evaluate();
            } else{
                if(buttonValue!='power')
                {
                    flag+=1;
                    if(flag==1){
                    display.value='';}
                updateDisplay(buttonValue);
                }
            }
        }
        }

        var buttons = document.querySelectorAll('.js');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', handleButtonClick);
        }
    </script>
</body>
</html>

power按钮是计算器开关 

 效果图：

 

希望蛊
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
计算机图形学课外练习Web版
12-29
计算机图形学课外练习Web版 计算机图形学课外练习Web版
java web 课后习题练习＋实验报告代码
05-26
java web 课后习题练习＋实验报告代码
Web课外练习9
没啥实力的博客
05-26 335
按住Ctrl点击导入的js和css文件路径将所需代码复制过去，或是将文件路径更改。将helloworld.vue文件的多余部分删去。
Web课外练习8
没啥实力的博客
05-19 226
【代码】Web课外练习8。
Web课外练习6
没啥实力的博客
04-27 256
【代码】Web课外练习6。
Web课外练习7
没啥实力的博客
05-11 291
【代码】Web课外练习7。
Web课后练习3
没啥实力的博客
03-30 195
【代码】Web课后练习3。
Web课外练习5
没啥实力的博客
04-17 113
【代码】Web课外练习5。
web应用技术第四次课后练习
lengxiaoyi__的博客
04-22 198
1.常规方式，controlller控制器不分层。
web应用技术 第二次课后练习
lengxiaoyi__的博客
04-15 197
2.navicat安装与激活。1.mysql的安装。
WEB应用技术课后练习一
YuuuuuX的博客
04-10 212
2.在idea中创建新的javaweb文件并运行jsp页面。1.完成JDK IDEA TOMCAT的下载安装及配置。
Web前端初学第一节课，课后练习
03-10
面积计算案例
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip
07-10
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip
JavaWeb程序设计教程课后练习答案.pdf
10-30
JavaWeb程序设计教程课后练习答案.pdf
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 524
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 250
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 329
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
springboot企业级开发教程课后练习
10-09
对于Spring Boot企业级开发教程的课后练习，可以考虑以下几个方面的练习： 1. 创建一个简单的RESTful API：通过Spring Boot创建一个基本的RESTful API，包括GET、POST、PUT和DELETE方法，并实现基本的业务逻辑。 2. 使用数据库进行数据操作：结合Spring Data JPA和Hibernate，实现数据表的增删改查操作，并进行相应的测试。 3. 实现用户认证和授权功能：使用Spring Security和JSON Web Token（JWT）实现用户认证和授权功能，确保只有授权用户才能访问受保护的API接口。 4. 编写单元测试和集成测试：使用JUnit和SpringBootTest等工具编写单元测试和集成测试，验证代码的正确性和可靠性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值