javascript字体颜色控件的开发 JS实现字体控制


Posted in Javascript onNovember 27, 2017

我们在用JS写程序的时候,经常会遇到像在程序中直接控制字体的大小颜色等基本信息,尤其的在后台方便,小编测试用javascript写了一个这个控件,喜欢的拿走吧。

javascript字体颜色控件的开发 JS实现字体控制

以上就是用JS写的运行效果,一下我们来看看代码具体实现方式:

知识点:for循环语句,字符串方法,进制转换,this指向问题,变量,数组方法,基本事件处理等。

<!doctype html><!--声明html版本编写指令 H5-->
<html>
  <head>
    <!--声明页面编码 uft-8 国际编码-->
    <meta charset="UTF-8">
    <!--网站三要素 关键字 页面描述 标题-->
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
    *{margin:0px;padding:0px;font-family:"微软雅黑";}
  #box{width:400px;
    height:450px;
    background:#000;
    margin:50px auto;
    border:5px
solid #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:1px solid #fff;
              position:relative;
              }
  #font ul li .roll .move .prog{position:absolute;
                top:0px;
                width:0px;
                height:12px;
                border-radius:10px 0 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>
  <div id="box">
    <div id="show">云烟好帅啊</div>
    <div id="font">
      <ul>
        <li>
          <span>字号</span>
          <div class="roll">
            8
              <div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            40px
          </div>
        </li>
        <li>
          <span>颜色R</span>
          <div class="roll">
            0
              <div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            255
          </div>
        </li>
        <li>
          <span>G</span>
          <div class="roll">0
              <div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            255
          </div>
        </li>
        <li>
          <span>B</span>
          <div class="roll">
          0
<div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            255
          </div>
        </li>
      </ul>
    </div>
  </div>
  </body>
  <script type="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 (var i=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>
Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
Angular2入门--架构总览
Mar 29 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue购物车插件编写代码
Nov 27 #Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
You might like
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Python 连连看连接算法
2008/11/22 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
四好少年事迹材料
2014/01/12 职场文书
大学毕业感言100字
2014/02/03 职场文书
继承权公证书
2014/04/09 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
golang实现浏览器导出excel文件功能
2022/03/25 Golang
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android