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来实现这个拖 ...
随机推荐
- python 基础3 函数
函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或 ...
- 使用gradle构建多模块springboot项目,打jar包
官方文档: https://spring.io/guides/gs/rest-service/ 参考:http://blog.csdn.net/u013360850/article/details/ ...
- [py]python多态-动态语言的鸭子类型
弱类型?强类型?动态语言,静态语言 弱类型: 在程序运行过程中,类型可变 还有一种说法: 动态 variables must necessarily be defined before they ar ...
- python3专业版安装及破解
1.网址 https://www.jetbrains.com/pycharm/download/#section=windows,打开页面,点击下载专业版 2.这是下载好的文件,双击运行即可. //详 ...
- Oracal 11 g 数据库安装
一:下载安装包 http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/112010-win64soft- ...
- WPF学习笔记-用Expression Design制作矢量图然后导出为XAML
WPF学习笔记-用Expression Design制作矢量图然后导出为XAML 第一次用Windows live writer写东西,感觉不错,哈哈~~ 1.在白纸上完全凭感觉,想象来画图难度很大, ...
- 修改SQL Server 的排序规则(转）
转自http://jimshu.blog.51cto.com/3171847/1095780/ 一.修改SQL Server服务器(实例)的排序规则 以下实验使用了SQL Server 2008 R2 ...
- PAT乙级 1024. 科学计数法 (20)(未通过全部测试，得分18)
1024. 科学计数法 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 HOU, Qiming 科学计数法是科学家用来表示很 ...
- Object-C-NSFileManager
+(NSFileManager *)defaultManager;//获得文件管理对象 -(BOOL)createFileAtPath:(NSString *)path contents:(NSDat ...
- 聊聊WKWebView
聊一聊WKWebView 前言 由于之前一直在用UIWebView,所以对于WKWebView只是停留在知道,了解的状态,并未深入的去研究.前天一个项目要求支持iOS8以上,要加入一个web界面.在习 ...