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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
Python FTP操作类代码分享
2014/05/13 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python字符串对象实现原理详解
2019/07/01 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
EJB的基本架构
2016/09/22 面试题
建议书标准格式
2014/03/12 职场文书
就业协议书的作用
2014/04/11 职场文书
大专学生求职信
2014/07/04 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
工作自我评价范文
2019/03/21 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript