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来实现这个拖 ...
随机推荐
- ListView多种item注意以及自己出现的莫名其妙的错误
如果ListView不懂,请绕路 1.ListView添加多个item必须用到的两个方法 getViewTypeCount一共有多少种item,我这里写的两种 getItemViewType当前pos ...
- 008-jdk1.7版本新特性
一.JDK1.7 名称:Dolphin(海豚) 发布日期:2011-07-28 新特性: 1.1.switch-case中可以使用字串 区分大小写.Java编译器通过switch使用String对象的 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- PAT 1030 Travel Plan[图论][难]
1030 Travel Plan (30)(30 分) A traveler's map gives the distances between cities along the highways, ...
- 转载一篇debug文章
http://versprite.com/og/ios-reverse-engineering-part-two-debugging-and-tracing-with-lldb/ iOS Revers ...
- 集成学习ensemble
集成学习里面在不知道g的情况下边学习边融合有两大派:Bagging和Boosting,每一派都有其代表性算法,这里给出一个大纲. 先来说下Bagging和Boosting之间的相同点:都是不知道g,和 ...
- 深入浅出TCP之listen
原文:http://blog.chinaunix.net/uid-29075379-id-3858844.html int listen(int fd, int backlog); 有几个概念需要在开 ...
- 分页Bootstrap实现
<%@ include file="/init.jsp" %> <script type="text/javascript" src=&quo ...
- SQL工具类
package com.ebizwindow.crm.utils; import java.util.List; import com.ebizwindow.crm.constants.SqlCons ...
- 学习Css补充知识点
1.text-transform: capitalize;UpperCase等 2.border-size:box,边框在定义的宽高范围内画, content默认,在宽高外画.元互的宽高只指内容 3 ...