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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jquery实现手风琴效果
Nov 20 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
原生js实现3D轮播图
Mar 21 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
php横向重复区域显示二法
2008/09/25 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
vue-axios使用详解
2017/05/10 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
python对象及面向对象技术详解
2016/07/19 Python
Python实现的建造者模式示例
2018/08/06 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
详解KMP算法以及python如何实现
2020/09/18 Python
酒吧副总经理岗位职责
2013/12/10 职场文书
军训自我鉴定
2014/01/22 职场文书
法人委托书范本
2014/04/04 职场文书
大学英语专业求职信
2014/06/21 职场文书
大学生简短的自我评价
2014/09/12 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
协议书范文
2015/01/27 职场文书
校园广播站开场白
2015/06/01 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
Elasticsearch 聚合查询和排序
2022/04/19 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL