js文字转移效果
这个例子算是有点样子的。
思路：
字符串操作。
左框里面先是预设的。
点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面，以此循环。
点击按钮时按钮变为灰色，在循环完成后恢复。
计数的总数（右边）是左框原字符串长度，已移动的数是右框每次循环的字符串长度。
循环时同时改变计数下面的小方块背景。
<!--
Author: XiaoWen
Create a file: 2016-12-07 23:26:24
Last modified: 2016-12-08 13:16:34
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字转移</title>
<style>
#box{
width: 800px;
margin: auto;
border: 6px solid #EDEDED;
background: #fff;
padding: 12px;
overflow: hidden;
text-align: center;
}
textarea{
width: 286px;
height: 188px;
padding: 6px;
margin: 0;
border: 0;
border: 1px dashed #000;
font-size: 16px;
}
#text_left{
float: left;
display: block;
background: #EFEF8F;
}
#text_right{
float: right;
display: block;
background: #0FF;
}
#center{
width: 200px;
float: left;
}
button{
background: #FEA400;
height: 30px;
width: 100px;
color: #fff;
font-family: 微软雅黑;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 10px;
height: 10px;
background: #FEA400;
display: inline-block;
}
</style>
</head>
<body>
<div id="box">
<textarea name="" id="text_left">时间就像一杯茶，而回忆就是茶叶，只有泡久了，才能从苦涩中品出茶叶的清香，而我现在终于体味到这句话的含义了。时隔长久，再去回味某一件事，才会想到另一面，看到事情的本质。</textarea>
<div id="center">
<button>文字右移</button>
<p><span>0</span>/<span>0</span></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<textarea name="" id="text_right"></textarea>
</div>
<script>
var left=document.getElementById("text_left");
var right=document.getElementById("text_right");
var btn=document.getElementsByTagName("button")[0];
var a_span=document.getElementsByTagName("span");
var a_li=document.getElementsByTagName("li");
var val; //定时器名称
var ok=0; //是否完成，0为完成
btn.onclick=function(){
var i=0; //字符下标
var j=0; //小方块下标
if(left.value==""){ //文字为空
alert("没有文字");
return;
}else if(ok==1){
alert("忙碌中");
return;
}else{
clearInterval(val); //防止定时器累加
a_span[1].innerHTML=left.value.length;
val=setInterval(function(){
ok=1; //任务正在进行中
btn.style.background="#FFDB99"; //点击按钮后把按钮变为浅色
a_span[0].innerHTML=i+1; //已完成的字符数，这里显示的是字符数，要+1
right.innerHTML+=left.value[0]; //在右框里拼接字符串左框里的第一个字符
left.value=left.value.slice(1); //截取左框里面第一个后面的字符并刷新
for(var j=0;j<a_li.length;j++){ //先还原清除所有li颜色
a_li[j].style.background="#FEA400";
}
a_li[i%a_li.length].style.background="#FF0000"; //再把指定的小方块颜色变为红色，有7个小方块（a_li.length等于7），i取余7后的数字刚好是0到6，可以作为下标。
i++;
if(left.value.length==0){ //如果超过字符数就结束定时器，这里用的是下标，要-1
clearInterval(val); //定时器结束
btn.style.background="#FEA400"; //完成后恢复按钮颜色
ok=0; //设置状态为完成
for(var j=0;j<a_li.length;j++){ //还原小方块颜色
a_li[j].style.background="#FEA400";
}
}
},50)
}
}
</script>
</body>
</html>
js文字转移效果的更多相关文章
- js文字滚动效果实现
纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...
- JS文字翻滚效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...
- js文字跳动效果
/*! * chaffle v1.0.0 * * Licensed under MIT * Copyright 2013-2014 blivesta * http://blivesta.com */ ...
- js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
- JS 黑客帝国文字下落效果
黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- 使用Three.js实现神奇的3D文字悬浮效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...
- js文字颜色闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- hdu1864最大报销额(01背包）
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=187#problem/G 该题要注意的就是每张单子A种类的总和不能大与600,同 ...
- df值自由度学习[转载]
转自:https://www.applysquare.com/topic-cn/78TAnIzZ6/ https://zhidao.baidu.com/question/175605082855699 ...
- 使用Python2.7 POST 数据到 onenet 平台
功能 发送数据名称为SENSORID(这里用TEST测试),数值为VALUE(这里用49值做测试)的数据,发送到自己的onenet对应设备 效果发送成功 代码 # -*- coding: utf-8 ...
- react native android 编译
修改 Maven 仓库地址 React Native 在初始化时会从 jcenter.binary.com 这个地方下载一些东西,网上搜索了一下,好像是在下载 Maven 相关的依赖. 针对全局进行修 ...
- Lintcode: Hash Function && Summary: Modular Multiplication, Addition, Power && Summary: 长整形long
In data structure Hash, hash function is used to convert a string(or any other type) into an integer ...
- Qt QDataTime QString 两个类的使用
QDateTime now = QDateTime::currentDateTime(); QString nowStr; nowStr = now.toString("yyyyMMdd_h ...
- Object-C-selector
Shape *shape=[[Shape alloc]init]; //[shape draw] SEL selDraw=@selector(draw); [shape performSelector ...
- 519. Random Flip Matrix（Fisher-Yates洗牌算法）
1. 问题 给定一个全零矩阵的行和列,实现flip函数随机把一个0变成1并返回索引,实现rest函数将所有数归零. 2. 思路 拒绝采样 (1)先计算矩阵的元素个数(行乘以列),记作n,那么[0, n ...
- php new stdClass array 实例代码
php new stdClass array 实例代码 $searchResults = array ();// //$obj = array ("rs"=>array(), ...
- linux服务器文件索引inodes满了
inode节点中,记录了文件的类型.大小.权限.所有者.文件连接的数目.创建时间与更新时间等重要的信息,还有一个比较重要的内容就是指向数据块的指针.一般情况不需要特殊配置,如果存放文件很多,需要配置. ...