javascript开发出文字修改样式
2017-11-26 16:30
423 查看
知识点:for循环语句,字符串方法,进制转换,this指向问题,变量,数组方法,基本事件处理等。
源码:
<!doctype html><!--声明html版本编写指令 H5-->
<html>
<head>
<!--声明页面编码 uft-8 国际编码-->
<metacharset="UTF-8">
<!--网站三要素 关键字 页面描述 标题-->
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>Document</title>
<styletype="text/css">
*{margin:0px;padding:0px;font-family:"微软雅黑";}
#box{width:400px;
height:450px;
background:#000;
margin:50pxauto;
border:5pxsolid #000;
border-radius:5px;
}
#show{width:100%;
height:190px;
background:#00ccff;
line-height:200px;
font-size:8px;
font-weight:bold;
text-align:center;
border-radius:5px;
}
#font ul{margin-left:10px;
margin-top:30px;}
#font ul li{width:380px;
height:50px;
list-style-type:none;
color:#ddd;}
#font ul li span{display:block;
width:50px;
height:50px;
line-height:50px;
text-align:right;
float:left;
}
#font ul li .roll{width:290px;
height:50px;
float:left;
line-height:50px;
padding-left:30px;
}
#font ul li .roll .move{width:200px;
height:12px;
display:inline-block;
background:#fff;
margin-left:15px;
margin-right:15px;
border-radius:10px;
background-size:cover;
border:1pxsolid #fff;
position:relative;
}
#font ul li .roll .move .prog{position:absolute;
top:0px;
width:0px;
height:12px;
border-radius:10px0 0 10px;
background:url("images/slider-bar.png")bottom;}
#font ul li .roll .move .prog .but{width:22px;
height:22px;
position:absolute;
top:-3px;
background:url("images/dot-bg.png")no-repeat;
cursor:pointer;
left:0px;}
</style>
</head>
<body>
<divid="box">
<divid="show">云烟好帅啊</div>
<divid="font">
<ul>
<li>
<span>字号</span>
<divclass="roll">
8
<divclass="move">
<divclass="prog">
<divclass="but"></div>
</div>
</div>
40px
</div>
</li>
<li>
<span>颜色R</span>
<divclass="roll">
0
<divclass="move">
<divclass="prog">
<divclass="but"></div>
</div>
</div>
255
</div>
</li>
<li>
<span>G</span>
<divclass="roll">
0
<divclass="move">
<divclass="prog">
<divclass="but"></div>
</div>
</div>
255
</div>
</li>
<li>
<span>B</span>
<divclass="roll">
0
<divclass="move">
<divclass="prog">
<divclass="but"></div>
</div>
</div>
255
</div>
</li>
</ul>
</div>
</div>
</body>
<scripttype="text/javascript">
/*
1.JS主要针对页面当中的HTML元素以及样式进行修改,从而得到特效
2.我们一般用JS写特效,要知道触发特效的条件是什么
3.促发这个条件的对象是谁
4.写这个事件里面发生的事情
5.获取鼠标的移动水平方向的距离
6.this代表当前执行这个事件的对象
(这个事件是谁做的 那么这个事件当中的this就是谁)
*/
var oBut =document.getElementsByClassName("but");//通过元素的类名 是以一个数组的形式保存
var oFont =document.getElementById("show");//通过ID名获取元素
var oProg =document.getElementsByClassName("prog");
var width = [0,0,0,0];
var rgb = ["00","00","00"];
for (vari=0;i<oBut.length;i++)//重复执行某一个语句(循环体) 限制条件
{
oBut[i].index=i;//自定义一个index属性保存i
oBut[i].onmousedown =function(e){//鼠标点击下去
//event事件对象 clientX clientY
var e = e || window.event;//做IE兼容
this.x =e.clientX;//当前对象的属性去保存这个值(自定义一个x属性)
var thisIndex = this;//定义一个变量保存this指向对象
var lastLeft = width[this.index];
//console.log("鼠标点击下去");
document.onmousemove =function(e){//鼠标移动事件
//console.log("鼠标移动事件");
var e = e || window.event;//做IE兼容
width[thisIndex.index] =e.clientX-thisIndex.x+lastLeft;
if (width[thisIndex.index]>180)width[thisIndex.index]=180;
if (width[thisIndex.index]<0)width[thisIndex.index]=0;
oBut[thisIndex.index].style.left =width[thisIndex.index]+"px";
oProg[thisIndex.index].style.width =width[thisIndex.index]+"px";
if (thisIndex.index ==0)
{
oFont.style.fontSize =width[thisIndex.index]/180*40+8+"px";
//驼峰命名法
}else{
var num = parseInt(width[thisIndex.index]/180*255);
/*if (num<16)
{
numStr ="0"+num.toString(16);
}else{
numStr = num.toString(16);
}*/
rgb[thisIndex.index-1] =num<16?"0"+num.toString(16):num.toString(16);
oFont.style.color ="#"+rgb[0]+rgb[1]+rgb[2];
}
}
document.onmouseup =function(){//鼠标松开事件
//console.log("鼠标松开事件");
this.onmousemove =null;//终止移动事件
this.onmouseup =null;//终止鼠标松开事件
}
}
}
</script>
</html>
web前端群:575308719,分享源码、视频、企业级案例、最新知识点,欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟大佬一起学前端!
相关文章推荐
- iOS开发之Swift标签栏按钮UITabBarItem样式修改(图标文字尺寸,颜色等)
- PHOTOSHOP 开发脚本初入 批量修改文字样式
- QA 基于开发的 JavaScript 修改测试数据和代码查看返回值的小例子
- iOS开发iOS7状态栏文字颜色修改
- 用Javascript开发《三国志曹操传》-开源讲座(三)-人物对话中,仿打字机输出文字
- [翻译-ASP.NET MVC]Contact Manager开发之旅之迭代2 - 修改样式,美化应用 【转】
- 开发日志:使用JavaScript添加/修改/删除Table表单
- JavaScript CSS修改学习第二章 样式
- javascript 动态修改样式和层叠样式表代码
- 修改infopath样式的小技巧(如何让文本框自适应文字多少?)
- HTML5表单required验证修改文字和样式
- mx.validators.Validator的错误提示文字的样式修改
- Word2013中修改文字样式
- 用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中,仿打字机输出文字
- JavaScript修改CSS伪元素:after和:before的样式
- 超全超实用的Javascript类库和jQuery插件大全之二:文字处理,表格和列表处理,实用的javascript开发工具
- XE7下修改FMX.Grid.pas解决Grid列头与文本内容的样式设定,实现标题栏文字居中,内容的文本可右对齐。
- php开发工具-zendstudio 修改字体样式
- AutoCAD开发3--修改文字图层,颜色
- Eclipse rap 富客户端开发总结(7) - 如何修改rap的样式