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实现DIV的一些简单控制
Jun 04 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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中操作ini配置文件的方法
2013/04/25 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python快排算法详解
2019/03/04 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python不同版本的_new_不同点总结
2020/12/09 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
天那边观后感
2015/06/09 职场文书