JavaScript的文字搬运工的功能

最新推荐文章于 2021-05-23 10:00:23 发布

转载最新推荐文章于 2021-05-23 10:00:23 发布 · 754 阅读

web前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个简单的网页应用，该应用能够实现将左侧文本区域的文字逐字搬运到右侧文本区域的功能，通过点击按钮触发搬运过程，并实时显示搬运进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

* {

padding: 0;

margin: 0;

}

.box {

width: 1200px;

height: 700px;

margin: 0 auto;

overflow: hidden;

background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/11/004435fkxwv3xt5pp8xf1x.jpg) no-repeat;

}

.wrap {

width: 852px;

height: 402px;

background: #7164c6;

margin: 158px auto;

border-radius: 5px;

padding: 27px;

position: relative;

}

.left, .right {

width: 300px;

height: 350px;

background: #ebf8f9;

border-radius: 5px;

float: left;

color: #7164c6;

font: 16px/24px "微软雅黑";

text-indent: 2em;

padding: 20px;

}

.right{

word-break: break-word;

overflow: auto;

color: palevioletred;

}

.wrap div:nth-child(3) {

float: right;

}

.middle {

overflow: hidden;

width: 100px;

height: 150px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

.btn {

display: block;

/*width: 100px;*/

height: 80px;

background: #6de0fd url(http://cdn.attach.qdfuns.com/notes/pics/201701/11/004434hhr7rr8srn0lmr95.png) no-repeat center 8px;

border: 1px solid #6de0fd;

border-radius: 5px;

text-align: center;

cursor: pointer;

}

.btn strong {

color: white;

display: block;

font-size: 14px;

margin-top: 55px;

font-family: simhei;

}

.btn .num {

color: white;

display: block;

margin-top: 20px;

font-size: 20px;

}

</style>

</head>

<body>

<textarea class="left">今生我在红尘深处守望你，种一抹心香守候你在弱水三千的繁华里；携一抹温暖等待你在流年清浅的岁月中；捻一抹牵念守望你在似水流年的归期里。为你我倾尽温柔抚一曲高山流水遇知音，为你我舞尽落红奏一曲长相依。任季节流转，任年华如玉，唯爱你的心永相系。一季静秋，一抹牵念，染一地的枫红菊黄，醉一指沧桑流年。书一笺绕指柔情，伴你浅舞天涯。沏一杯清茗独品一江春水，拂一曲禅心弹奏青莲佛音，绘一笔丹青描画比翼双飞，染一壑红枫相伴懂你之人。</textarea>

<strong>把文字右移</strong>

</span>

</div>

</div>

</body>

//获取元素

var leftTxt = document.querySelector(".left");

var rightTxt = document.querySelector(".right");

var btn = document.querySelector(".btn");

var num = document.querySelector(".num");

btn.onclick = function() {

move();