後台Coding工具詳解 – HTML和Shortcode教學

1. HTML

下面是範例呈現

猜數字遊戲

請猜一個1到100之間的數字：

拖放HTML小工具：在Elementor編輯器中，從元素庫中將「HTML」小工具拖放到頁面上。
輸入HTML代碼：在內容設置中，輸入或粘貼自定義HTML代碼。
預覽效果：即時預覽輸入的HTML代碼在頁面上的效果。
自定義樣式：如果需要，添加自定義CSS來調整HTML內容的樣式。
保存並預覽：保存更改並預覽頁面，確保HTML代碼正常顯示和運作。

				
					 <p>下面是範例呈現</p><br>
<div id="game">
    <h2>猜數字遊戲</h2>
    <p>請猜一個1到100之間的數字：</p>
    <input type="number" id="guessInput" min="1" max="100">
    <button onclick="checkGuess()">提交</button>
    <p id="result"></p>
</div>

<script>
    const randomNumber = Math.floor(Math.random() * 100) + 1;
    let attempts = 0;

    function checkGuess() {
        const userGuess = document.getElementById('guessInput').value;
        const result = document.getElementById('result');
        attempts++;

        if (userGuess == randomNumber) {
            result.textContent = `恭喜你！你猜對了！你用了 ${attempts} 次機會。`;
        } else if (userGuess > randomNumber) {
            result.textContent = '你猜的數字太大了。再試一次！';
        } else {
            result.textContent = '你猜的數字太小了。再試一次！';
        }
    }
</script><br>