js实现仿华为手机计算器,兼容电脑和手机屏幕

效果图:

电脑端:

js实现仿华为手机计算器,兼容电脑和手机屏幕_第1张图片

手机端:js实现仿华为手机计算器,兼容电脑和手机屏幕_第2张图片

 

js实现仿华为手机计算器,兼容电脑和手机屏幕_第3张图片

源码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿华为计算器title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            overflow: hidden;
        }
        .calculator{
            width: 300px;
            margin: 10px auto;
            border: 1px solid #E4E4E4;
        }
        .calc-screen p{
            background-color: #fff;
            height: 60px;
            line-height: 60px;
            text-align: right;
            padding: 0px 10px;
            overflow-x: hidden;
        }
        .calc-in{
            font-size: 20px;
            font-weight: bold;
        }
        .calc-out{
            color: darkgray;
        }
        table{
            border-collapse: collapse;
        }
        .calc-btn td{
            width: 75px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #ffffff;
            border: 1px solid #E4E4E4;
            margin-left: -1px;
            margin-right: -1px;
            font-size: 20px;
            cursor: pointer;
        }
        .calc-btn td:hover{
            background-color: #EAEAEA;
        }
        .del{
            background: url("del.jpg") no-repeat 25px;
        }
        .calc-btn .bc{
            background-color: #F5F5F5;
        }
        .calc-btn td.eq:hover{
            background-color: #019DB1
        }
        .fcg{
            color: #00ACC2;
        }
    style>
head>
<body>
<div class="calculator" id="calculator">
    <form action="" name="calculator" method="get">
        <div class="calc-screen">
            
            <p class="calc-in" id="calc-in">p>
            
            <p class="calc-out" id="calc-out">p>
        div>
        <div class="calc-btn" id="calc-btn">
            <table>
                <tr>
                    <td class="bc">mctd>
                    <td class="bc">m+td>
                    <td class="bc">m-td>
                    <td class="bc">mrtd>
                tr>
                <tr>
                    <td class="fcg bc" onclick="clearScreen()">ctd>
                    <td class="fcg bc" onclick="command('÷')">÷td>
                    <td class="fcg bc" onclick="command('×')">×td>
                    <td class="del bc" onclick="del()">td>
                tr>
                <tr>
                    <td onclick="command(7)">7td>
                    <td onclick="command(8)">8td>
                    <td onclick="command(9)">9td>
                    <td class="fcg bc" onclick="command('-')">-td>
                tr>
                <tr>
                    <td onclick="command(4)">4td>
                    <td onclick="command(5)">5td>
                    <td onclick="command(6)">6td>
                    <td class="fcg bc" onclick="command('+')">+td>
                tr>
                <tr>
                    <td onclick="command(1)">1td>
                    <td onclick="command(2)">2td>
                    <td onclick="command(3)">3td>
                    <td rowspan="2" style="color: #fff;background-color: #00ACC2" class="eq" onclick="calc()">=td>
                tr>
                <tr>
                    <td onclick="command('%')">%td>
                    <td onclick="command(0)">0td>
                    <td onclick="command('.')">.td>
                tr>
            table>
        div>
    form>
div>

<script>
    //兼容屏幕
    screenW = window.screen.width;//屏幕分辨率
    screenH = window.screen.height;//屏幕分辨率
    var calculator = document.getElementById("calculator");
    var calc_btn = document.getElementById("calc-btn").getElementsByTagName("td");
    console.log(document.body.clientWidth)
    if(document.body.clientWidth<600){
        calculator.style.width = screenW+"px";
        calculator.style.height = screenH+"px";
        calculator.style.border = "none";
        calculator.style.margin = "0";
        for(var i = 0;i<calc_btn.length;i++){
            calc_btn[i].style.width = screenW/4+"px";
            calc_btn[i].style.height = (screenH-120)/6 + "px";
        }
    }

    var calcIn = document.getElementById("calc-in");
    var calcOut = document.getElementById("calc-out");

    //输入数据函数
    function command(str) {
        calcIn.innerHTML = "" ? calcIn.innerHTML = str : calcIn.innerHTML =calcIn.innerHTML+str;
    }
    //计算数据函数
    function calc() {
        calcOut.innerHTML = eval(calcIn.innerHTML.replace(/×/g,"*").replace(/÷/g,"/").replace(/%/,"/100"));
        if(calcOut.innerHTML == "undefined"){
            calcOut.innerHTML = "";
        }
    }
    //清屏函数
    function clearScreen() {
        calcIn.innerHTML = "";
        calcOut.innerHTML = "";
    }
    //每次删除一位数据的函数
    function del() {
        calcIn.innerHTML = calcIn.innerHTML.substr(0,calcIn.innerHTML.length-1);
    }

script>
body>
html>

小图标:

 

 

转载于:https://www.cnblogs.com/alex-xxc/p/10281374.html

你可能感兴趣的:(js实现仿华为手机计算器,兼容电脑和手机屏幕)