HTML5+JavaScript+css3原始淘宝网计算器制作

最新推荐文章于 2022-04-22 19:32:38 发布

外太空程序员

最新推荐文章于 2022-04-22 19:32:38 发布

阅读量1k

点赞数 2

文章标签： html5 javascript css3

本文链接：https://blog.csdn.net/qq_48516121/article/details/121032668

版权

一、程序如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        .bj{
            background-color: aqua;
            width: 320px;
            height: 330px;
            text-align: center;
            padding-top: 1px;
            margin: 100px auto;
            border: 1px solid wheat;
        }
        .an{
            width: 60px;
            height: 30px;
        }
        .text{
            width: 200px;
            height: 30px;
            border-width:1px;
            border-style:solid;
        }
    </style>
</head>
<body>
<div class="bj" >
    <div >
        <br>
    <img src='images/1.gif' align="left" >
        <input type="text" id="clock" class="text"><br>
    </div>
    <h1>购物简易计算器</h1>
    <form action='' mothod='post' name='Shopping'>
    <p>第一个值：<input type="text" name="t1" value="" id="t1" class="text"></p>
    <p>第二个值：<input type="text" name="t2" value="" id="t2" class="text"></p>
    <p><input type="button" value="+" class="an" id="b1" onclick='compute("+")'>
    <input type="button" value="-"  class="an" id="b2" onclick='compute("-")'>
    <input type="button" value="×" class="an" id="b3" onclick='compute("×")'>
    <input type="button" value="÷" class="an" id="b4" onclick='compute("÷")' ></p>
    <p>计算结果为：<input type="text" name="t3" value="" id="t3" class="text"></p>
    </form>
</div>
<script>
    function compute(re){
               var num1,num2;
               num1=parseFloat(document.Shopping.t1.value);
               num2=parseFloat(document.Shopping.t2.value);
               if(re=='+'){
                     document.Shopping.t3.value=num1+num2;
                   }else if(re=='-'){
                     document.Shopping.t3.value=num1-num2;
                   }else if(re=='×'){
                     document.Shopping.t3.value=num1*num2;
                   }
              else if(re=='÷'&&num2!=0){
                     document.Shopping.t3.value=num1/num2;
                   }
           }
    function mytime() {
        var mydate = new Date();
        var hour = mydate.getHours();
        var minutes = mydate.getMinutes();
        if(minutes < 10) {
            minutes = '0' + minutes;
        }
        var seconds = mydate.getSeconds();
        if (seconds < 10) {
            seconds = '0' + seconds;
        }
        var time = '当前时间为：' +hour + '时' + minutes + '分' + seconds + '秒';
        document.getElementById('clock').value = time;
    }
    setInterval(mytime, 1000);
</script>
</body>
</html>

2、难点：

（1）怎样将时间动态显示：使用date方法将现在时间读取

（2）获得动态时间代码如下：（时分秒）

<!DOCTYPE html>
<!DOCTYPE HTML>
<html>
<head>
    <title>haha</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function mytime() {
            var mydate = new Date();
            var hour = mydate.getHours();
            var minutes = mydate.getMinutes();
            if(minutes < 10) {
                minutes = '0' + minutes;
            }
            var seconds = mydate.getSeconds();
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            var weekday = mydate.getDay();

            var time = '当前时间为：' +hour + '时' + minutes + '分' + seconds + '秒';
            document.getElementById('clock').value = time;
        }
        setInterval(mytime, 1000);
    </script>
</head>
<body>
<form>
    <!--显示时间的文本框-->
    <input type="text" id="clock" size="50">
</form>
</body>
</html>

（3）获取动态时间（年月日，时分秒）主要程序如下：

<div id="divid"></div>
<script type="text/javascript">
	window.setInterval("showtime()",10);
	function showtime(){
		var date = new  Date().toLocaleString();
		var divobj = document.getElementById("divid");
		divobj.innerHTML=date;
	}
</script>

三、淘宝计算器运行结果如下