html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...

这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下

本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

文本框中输入文字,页面中div层同步获取文本框内容

textarea{width:300px;height:150px; border:1px solid #CCC; font-size:12px; color:#000;}

p{ padding-left:30px; text-indent:-30px;width:270px;height:250px; border:1px solid #900; margin-top:50px; font-size:12px; color:#F00; line-height:21px; overflow:hidden}

function SwapTxt()

{

var txt = document.getElementById("eml").value;

document.getElementById("lyny").innerHTML=txt;

}

代码家园提示:请在上面的文本框中输入文字,,如

希望本文所述对大家的javascript程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,对于JavaScript文本框的跑马灯效果,可以使用以下代码进行实现HTML部分: ```html <div class="marquee"> <span class="text">要滚动的文本内容</span> </div> ``` CSS部分: ```css .marquee { width: 200px; // 设置文本框宽度 height: 20px; // 设置文本框高度 overflow: hidden; // 隐藏超出文本框部分 border: 1px solid #000; // 设置边框,可根据需要进行修改 } /* 设置文本滚动样式 */ .text { display: inline-block; white-space: nowrap; // 不换行 animation: marquee 5s linear infinite; // 设置动画,可根据需要进行修改 } /* 定义动画 */ @keyframes marquee { 0% { transform: translateX(0); // 初始位置 } 100% { transform: translateX(-100%); // 终止位置 } } ``` JavaScript部分: 以上只是 HTML 和 CSS 的部分,文本的滚动效果是通过 CSS3 动画实现的。要实现这个功能,需要在 HTML 添加一些控制代码来控制文本框的显示和隐藏。以下是完整的 JavaScript 代码: ```javascript // 获取文本框元素 var marquee = document.querySelector(".marquee"); // 获取文本元素 var text = marquee.querySelector(".text"); // 获取文本长度 var textWidth = text.offsetWidth; // 复制一份文本到文本框末尾 text.innerHTML += text.innerHTML; // 定义滚动函数 function scrollText() { if (marquee.scrollLeft <= 0) { marquee.scrollLeft += textWidth; } else { marquee.scrollLeft--; } } // 使用 setInterval() 定时执行滚动函数 setInterval(scrollText, 20); ``` 通过这段代码,文本框的文本内容就可以实现来回进行左右移动的跑马灯效果了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值