优惠计算器，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <h1 class="title">
    Hello 欢迎使用
  </h1>
  <p class="desc">
    在页面中间靠上的输入框输入您的订单价格
  </p>
  <p class="desc">
    弹出的下一个界面查看价格
  </p>
  <p class="desc" style="color: red;">
    若没有输入框，请在主流浏览器中打开！
  </p>
  <button onclick="window.location.reload()">点此重新加载</button>
</body>

</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

button {
    width: 100%;
    /* 按钮宽度填满 */
    padding: 10px;
    /* 内边距 */
    background-color: #66afe9;
    /* 按钮背景颜色 */
    border: none;
    /* 去掉边框 */
    border-radius: 4px;
    /* 圆角 */
    color: white;
    /* 文字颜色 */
    font-size: 16px;
    /* 字体大小 */
    cursor: pointer;
    /* 鼠标悬停样式 */
    transition: background-color 0.3s;
    /* 背景颜色过渡效果 */
    margin: 5px 0 5px 0;
}

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            console.log("————折扣计算器————");
let a = Number(prompt('请输入您的价格（单位：元）', '114514'));
let b = Math.floor(a / 30) * 1.23 > a * 0.028227
    ? "97折叠加每满30-1.23划算，即：" + (a * 0.97 - Math.floor(a / 30) * 1.23) + "元"
    : "两次97折叠加划算,即：" + (a * 0.9409) + "元"
const sale_out = () =>
    a < 0 ? "您要倒给我钱的话其实就不用折扣啦"
    : a === 0 ? "您是打算0元购吗awa"
    : Number.isNaN(a) ? "您输入的似乎不是一个数呢"
    : b;
window.alert(sale_out());
console.log(sale_out());

预览

控制台