Html乘法 - 悦读

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Multiply 1 by 1.1</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 20px;  
        }  
        .result {  
            margin-top: 20px;  
        }  
    </style>  
</head>  
<body>  
    <h1>Multiply 1 by 1.1</h1>  
    <button id="multiplyButton">乘法</button>  
    <div class="result">  
        <p>结果: <span id="result">1</span></p>  
        <p>次数: <span id="timesMultiplied">0</span></p>  
    </div>  
  
    <script>  
        let result = 1;  
        let timesMultiplied = 0;  
  
        document.getElementById('multiplyButton').addEventListener('click', function() {  
            // Perform the multiplication  
            result *= 1.1;  
            // Increment the times multiplied counter  
            timesMultiplied++;  
  
            // Update the result and timesMultiplied on the page  
            document.getElementById('result').textContent = result.toFixed(2); // Show 2 decimal places  
            document.getElementById('timesMultiplied').textContent = timesMultiplied;  
        });  
    </script>  
</body>  
</html>
运行网址:
HTML/CSS/JS在线运行代码,代码编辑器-站长工具