内置函数和 console.log()

1console.log("Hello, World!");

1console.log(42);

1console.log("=== My Store ===");
2console.log("Apples x2 - $4.00");
3console.log("Bananas x3 - $3.00");
4console.log("Total: $7.00");

1console.log(`Total bill: ${12}`);

Code Example

1=== MART RECEIPT === 
2
3Cashier Name: Alex  
4
5Items Purchased: 
6Milk (1): 4 
7Bread (1): 2 
8Eggs (12): 0.5 x 12 = 6  
9
10Total bill: 4 + 2 + 6 = 12

1console.log("=== MART RECEIPT ===");
2console.log("Cashier Name: Alex");

1console.log("=== MART RECEIPT ===");
2console.log("Cashier Name: Alex");
3console.log("Items Purchased: ")
4console.log(`Milk (${1}): ${4} `)
5// 补全剩余的代码，遇到困难可使用 PageFlux AI

1console.log("=== MART RECEIPT ===\n");
2
3console.log("Cashier Name: Alex\n");
4
5console.log("Items Purchased: ");
6console.log(`Milk (${1}): ${4} `);
7console.log(`Bread (${1}): ${2} `);
8console.log(`Eggs (${12}): ${0.5} x ${12} = ${6}\n`);
9
10console.log(`Total bill: ${4 + 2 + 6}`);

1console.log("=== MART RECEIPT ===\n");
2
3console.log("Cashier Name: Alex\n");
4
5console.log("Items Purchased: ");
6console.log(`Milk (${1}): ${4} `);
7console.log(`Bread (${1}): ${2} `);
8console.log(`Eggs (${12}): ${0.5} x ${12} = ${6}\n`);
9
10console.log(`Total bill: ${4 + 2 + 6}`);

嘿，AI，你能把我这个基于控制台的收据程序改成一个简单的网页吗？ 我希望收据：

• 在网页上整齐地显示（而不是打印到控制台）。

• 保持相同的结构：标题、收银员姓名、商品和总计。

我的代码如下：

1console.log("=== MART RECEIPT ===");
2console.log("Cashier Name: Alex");
3console.log("Items Purchased: ");
4console.log(`Milk (${1}): ${4} `);
5console.log(`Bread (${1}): ${2} `);
6console.log(`Eggs (${12}): ${0.5} x ${12} = ${6}`);
7console.log(`Total bill: ${4 + 2 + 6}`);

Hey AI, can you turn my console-based receipt program into a simple web page? I’d like the receipt to:

• Display neatly on the web page (instead of the console).

• Show the same structure with a heading, cashier name, items, and the total.

My code is given below:

1console.log("=== MART RECEIPT ===");
2console.log("Cashier Name: Alex");
3console.log("Items Purchased: ");
4console.log(`Milk (${1}): ${4} `);
5console.log(`Bread (${1}): ${2} `);
6console.log(`Eggs (${12}): ${0.5} x ${12} = ${6}`);
7console.log(`Total bill: ${4 + 2 + 6}`);

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Receipt</title>
5</head>
6<body>
7    <pre id="receipt"></pre>
8
9    <script>
10        document.getElementById('receipt').textContent = 
11`=== MART RECEIPT ===
12Cashier Name: Alex
13Milk (1): 4
14Bread (1): 2
15Eggs (12): 6
16Total bill: 12`;
17    </script>
18</body>
19</html>

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Receipt</title>
5</head>
6<body>
7    <pre id="receipt"></pre>
8
9    <script>
10        document.getElementById('receipt').textContent = 
11`=== MART RECEIPT ===
12Cashier Name: Alex
13Milk (1): 4
14Bread (1): 2
15Eggs (12): 6
16Total bill: 12`;
17    </script>
18</body>
19</html>

Code Example

1Thank you for shopping with us!

Code Example

1=== MART RECEIPT ===
2Cashier Name: Alex
3
4Items Purchased:
5Milk (1): 4
6Bread (1): 2
7Eggs (12): 6
8
9Total bill: 12
10
11Thank you for shopping with us!

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Receipt</title>
5</head>
6<body>
7    <!-- Preformatted block where the receipt text will appear -->
8    <pre id="receipt"></pre>
9
10    <script>
11        // Use textContent to insert the receipt text (preserves formatting inside <pre>)
12        document.getElementById('receipt').textContent = 
13`=== MART RECEIPT ===
14Cashier Name: Alex
15
16Items Purchased:
17Milk (1): 4
18Bread (1): 2
19Eggs (12): 6
20
21Total bill: 12
22
23Thank you for shopping with us!`;
24    </script>
25</body>
26</html>

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Receipt</title>
5</head>
6<body>
7    <!-- Preformatted block where the receipt text will appear -->
8    <pre id="receipt"></pre>
9
10    <script>
11        // Use textContent to insert the receipt text (preserves formatting inside <pre>)
12        document.getElementById('receipt').textContent = 
13`=== MART RECEIPT ===
14Cashier Name: Alex
15
16Items Purchased:
17Milk (1): 4
18Bread (1): 2
19Eggs (12): 6
20
21Total bill: 12
22
23Thank you for shopping with us!`;
24    </script>
25</body>
26</html>