JS通过在页面的文本框输入信息,点击添加按钮将输入的信息渲染到页面上。

1.在文本域中输入信息,点击按钮把文本于内容渲染在页面上,并且文本域为空时不能添加。

<textarea name="" id="textarea" cols="30" rows="10"></textarea>
<button id="release">发布</button>
 <script>
        let ul = document.createElement('ul'); //  创建ul节点
        release.onclick = function () {
            let textarea = document.getElementById('textarea').value // 获取文本域的值
            let release = document.getElementById('release');
            if (textarea != 0) {   // 对文本域拿到的信息进行判断
                let textNode = document.createTextNode(textarea);
                let liNode = document.createElement('li');
                liNode.appendChild(textNode);
                ul.appendChild(liNode);
            }
        }
        document.body.appendChild(ul);


    </script>

2.在文本框中输入信息,点击按钮把文本于内容渲染在页面上。

<div id="container">
     <h2 id="h2">颐和园</h2>
     <input type="text" id="inputVal"> <button id="addMsg">添加</button>
 </div>

    <script>
        let addMsg = document.querySelector('#addMsg');
        addMsg.onclick = function () {
            let container = document.getElementById('container');
            let inputVal = document.querySelector('#inputVal').value;
            let textNode = document.createTextNode(inputVal);
            let myH2 = document.createElement('h2');
            myH2.appendChild(textNode);
            let h2 = document.getElementById('h2')
            if (h2.parentNode) {
                h2.parentNode.insertBefore(myH2, container.firstChild.nextSibling)
            }
        }

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴为您解答问题! 对于您的问题,我可以回答。以下是JavaScript代码实现输入的时间的倒计时效果,并在页面渲染的步骤: 1. 首先,在页面添加一个文本框和一个按钮,用于输入时间和开始倒计时: <input type="text" id="countdownTime" placeholder="请输入倒计时时间"> <button onclick="startCountdown()">开始倒计时</button> 2. 然后,编写一个startCountdown函数用于处理按钮点击事件,并获取输入的时间: function startCountdown() { var timeInput = document.getElementById("countdownTime").value; // 获取输入的时间 var targetTime = new Date().getTime() + timeInput * 1000; // 计算目标时间的时间戳 countdown(targetTime); // 调用倒计时函数 } 3. 接着,编写一个countdown函数,用于实现倒计时的逻辑,并将剩余时间渲染页面上: function countdown(targetTime) { var intervalId = setInterval(function() { var currentTime = new Date().getTime(); // 获取当前时间的时间戳 var remainingTime = targetTime - currentTime; // 计算剩余时间的毫秒数 if (remainingTime < 0) { // 如果剩余时间小于0,则停止倒计时 clearInterval(intervalId); document.getElementById("timer").textContent = "倒计时结束!"; return; } // 将剩余时间转换为小时、分钟和秒数 var hours = Math.floor(remainingTime / (60 * 60 * 1000)); var minutes = Math.floor((remainingTime - hours * 60 * 60 * 1000) / (60 * 1000)); var seconds = Math.floor((remainingTime - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000); // 渲染剩余时间到页面上 document.getElementById("timer").textContent = "倒计时剩余时间:" + hours + "小时 " + minutes + "分钟 " + seconds + "秒"; }, 1000); } 4. 最后,在页面添加一个具有id属性为“timer”的元素,用于显示剩余时间: <p id="timer"></p> 这样,当用户在文本框输入一个时间并点击“开始倒计时”按钮时,就会开始执行倒计时程序,并将剩余时间渲染页面上。 希望这个解答对您有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值