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来实现这个拖 ...
随机推荐
- HTTP权威指南读书笔记
HTTP权威指南笔记 读书有两种境界,第一种境界是将书读薄,另一种是读厚.本篇文章就是HTTP权威指南的读书笔记,算是读书的第一重境界,将厚书读薄.文章对HTTP的一些关键概念做了比较详细的概述,通读 ...
- Python中使用中文正则表达式匹配指定的中文字符串
业务场景: 从中文字句中匹配出指定的中文子字符串 .这样的情况我在工作中遇到非常多, 特梳理总结如下. 难点: 处理GBK和utf8之类的字符编码, 同时正则匹配Pattern中包含汉字,要汉字正常发 ...
- spring boot整合JWT例子
application.properties jwt.expire_time=3600000 jwt.secret=MDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjY34DFDSS ...
- \r与\n
\n是换行,英文是New line \r是回车,英文是Carriage return
- 如何制作Windows镜像
1.在https://msdn.itellyou.cn/网站中下载(使用迅雷)Windows2003R2 中文版ISO 2.使用qemu-img create命令创建一个空的 后缀为.img的文件 q ...
- hive 配置参数说明（收藏版）
问题导读: 如何设置reduce的个数? Hive 默认的数据文件存储路径? Hive 默认的输出文件格式? 是否开启 map/reduce job的并发提交? 所允许的最大的动态分区的个数? hiv ...
- Qt的四个常见的图像叠加模式
Qt的QPainter::CompositionMode提供了多种图像叠加的模式.常见的有QPainter::CompositionMode_SourceOver, QPainter::Composi ...
- Python3 识别验证码（opencv-python）
Python3 识别验证码(opencv-python) 一.准备工作 使用opencv做图像处理,所以需要安装下面两个库: pip3 install opencv-python pip3 insta ...
- 20145216史婧瑶《网络对抗》逆向及Bof进阶实践
20145216史婧瑶<网络对抗>逆向及Bof进阶实践 基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢 ...
- NOIP Mayan游戏 - 搜索
Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定的步数内消除所有 ...