书犹药也,善读可以医愚

    

日常敲代码练习

一个非常非常之简单的敲代码练习,
根据《javascript》案例的要求,
一个用户输入表单,获取用户输入的数据并进行处理,
好吧,其实就是一个甜甜圈订单的form,
根据用户输入要订的甜甜圈种类的数量,
即时计算价格、税额以及总价格:

额,昨晚将highlight.js整合到了主题中,正好看下代码高亮的效果阿哈哈哈!


<!DOCTYPE html>
<html>
<head>
    <title>practice02</title>
    <meta charset="utf-8">
    <style type="text/css">
        .div1 {
            width: 600px;
            margin: 20px auto;
            text-align: center;
        }
        .label1 {
            width: 150px;
            text-align: right;
            padding-right: 5px;
            display: inline-block;
        }
    </style>
    <script type="text/javascript">
        function updateOrder() {
            const DONUTSPRICE = 0.50;
            const TAXRATE = 0.0925;
            var cakedonuts = parseInt(document.getElementById("cakedonuts").value);
            var glazeddonuts = parseInt(document.getElementById("glazeddonuts").value);
            if (isNaN(cakedonuts)) {
                cakedonuts = 0;
            }
            if (isNaN(glazeddonuts)) {
                glazeddonuts = 0;
            }
            var subtotal = (cakedonuts + glazeddonuts) * DONUTSPRICE;
            var tax = subtotal * TAXRATE;
            var total = subtotal + tax;
            document.getElementById("subtotal").value = "$" + subtotal.toFixed(2);
            document.getElementById("tax").value = "$" + tax.toFixed(2);
            document.getElementById("total").value = "$" + total.toFixed(2);
        }
    </script>
</head>
<body>
    <div class="div1">
        <h1>Donuts</h1>
        <form name="orderform" action="" method="post">
            <p><label class="label1">Name:</label><input type="text" name="name" id="name"></p>
            <p><label class="label1"># of cake donuts:</label><input onchange="updateOrder();" type="text" name="cakedonuts" id="cakedonuts" value="0"></p>
            <p><label class="label1"># of glazed donuts:</label><input onchange="updateOrder();" type="text" name="glazeddonuts" id="glazeddonuts" value="0"></p>
            <p><label class="label1">Minutes 'til pickup:</label><input type="text" name="time" id="time"></p>
            <p><label class="label1">Subtotal:</label><input type="text" name="subtotal" id="subtotal"></p>
            <p><label class="label1">Tax:</label><input type="text" name="tax" id="tax"></p>
            <p><label class="label1">Total:</label><input type="text" name="total" id="total"></p>
            <p><input type="button" name="submit" value="Place order"></p>
        </form>
    </div>
</body>
</html>

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post 漂亮的手写字
Next post   发票事件,峰回路转

已有 12 条评论

  1. 这高亮挺好看的,哈,在学习Javascritp了
    1. 回复 爱CSS: highlight.js,除了没有行号外,还是挺好用的,提供了很多种样式,引入很方便。
    1. 回复 清歌: 我觉得你应该也去敲下代码看看了,因为你文章里的评论挂了:(
  2. 10年了,兄弟!我做金融都做了6年了~~~哈哈哈哈
    1. 回复 老俍: 难怪,难怪!时间能带走一切,神马都是浮云。
    1. 回复 老俍: 隔行了,隔行了,不过凭着当年能考过CCNP的本事,你要学这些还不是手到擒来,洒洒水啦:)
  3. 努力的人都可贵,加油!
    1. 回复 park: 谢谢,满满的动力:)
      BTW:公司网站很不错
    1. 回复 老俍: 用sublime text一直这个配色用习惯了,听你这么一说,还真有点花花绿绿的感觉阿哈哈。

添加新评论

  时光笔记:Avengers:Endgame

Marvel
看完了惊奇队长,相当期待4月份的复仇者联盟4阿,有木有?

updated on :

  关于博主

84年生人,天秤座与处女座交接,有一点点强迫症,性格诡异,情绪复杂多变。爱好健身、跑步,一年必跑一场全程马拉松,N场半程马拉松。也喜欢听歌与阅读,喜欢接触新鲜事物。座右铭:活到老,学到老,生命在于运动!

  近期评论

  •  map: 不是你适合一个人生活,一个人生活也只是阶段性,等到结婚有孩子后,牵挂太多,生活束缚了你的很多自...
  •  爱CSS: 难得有这份坚持呀,着实不容易
  •  有意博客: 能坚持锻炼,真好。我有两年没锻炼了,昨天开始准备重新回到锻炼。
  •  知趣书库: Wow,your personal website is so refined.
  •  小酱: 互相串门啊!超级喜欢你的模板! 网站名称:小酱博客~只为博你芳心! 网站简介:被嘲笑梦依旧前进...
  •  安笙: 我也很喜欢运动
  •  松鼠大大: 哇哦,挺棒的主题,真的就像是楼上说的那样,typecho不可多的的主题。收藏啦,博主加油,给个...
  •  枫叶: 看了你的博客,我觉得我应该能学点东西,最近也在想学Js,但是不知道从哪里入手。
  •  kimeng: 请问一个问题 就是你这个主题添加超过两个轮播图片他没有轮播出后面的图片,也没有循环轮播,请问怎...
  •  COAadmin: 农村的4个口2层楼,目前一个K2p,2个K2基本全覆盖

青春就是用来追忆的,当你怀揣着它时,它一文不值,只有将它耗尽后,再回过头看,一切才有了意义,爱过我们的人和伤害过我们的人,都是我们青春存在的意义。

既然活着来到这个世界,就没有打算活着回去。所以,在这有限的时间里,我们应该珍惜生命,珍惜机会,更要珍惜那得之不易的时间。因那滴答做响的时间脚步,一旦走过,再不回头。

青春是一个充满魁力,充满诱惑的时代。好动是青春,好奇是青春,好玩是青春。玩世不恭更是青春,我们的一切切都是青春。

要先打败任何事情得先学会打败自己。

我会把每一次改变当做成长,哪怕是痛也值得。