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

2024-12-15 08:36:26

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

以上就是用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实现字体控制

我们在用JS写程序的时候,经常会遇到像在程序中直接控制字体的大小颜色等基本信息,尤其的在后台方便,小编测试用javascript写了一个这个控件,喜欢的拿走吧. 以上就是用JS写的运行效果,一下我们来看看代码具体实现方式: 知识点:for循环语句,字符串方法,进制转换,this指向问题,变量,数组方法,基本事件处理等. <!doctype html> <html> <head> <!--声明页面编码 uft-
自己动手写的javascript前端等待控件

等待控件在网上搜有好多种,但是都很复杂,不一定用的顺手,再说我的项目是bootstrap的原因,又不敢轻易使用第三方控件,怕不兼容,于是自己动手写了个等待控件,其技术点包括动态加载CSS,javascript的命名空间,所以记录一下. 这个等待控件主要是:进行某个操作前,显示一个信息提示:"数据加载中,请稍候...",操作成功后,在回调函数中将提示消失,原理是这个等待控件完全由JS动态加进去,包括CSS,页面中并无预先设定. 那么这个CSS怎么动态加载呢?等待控件中,样式使用了clas
asp.net(C#)中给控件添加客户端js事件的方法

放在服务器端,也可以用ajax来实现,不刷页面.但我觉得有更直接更简单方法,用一个js事件是可以实现的. 但,DropDownList不偈Button等控件提供了一些像"OnClientClick"前台事件,只有服务端事件. 想到,所有C#页面代码,最终都是生成HTML,js事件也是最终运在浏览器中,以Html为基础的.服务端控件最终生成的HTML控件有什么js事件,我们应该就能在aspx中给它添加相应的事件. DropDownList 生成的Htm是元素<Select>是
ActiveX控件的使用-js实现打印超市小票功能代码详解

·应客户的需求= = ,要在网页端实现打印小票的功能 ·先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略) 用什么方法实现呢: 我想应该是有三种吧 1.用第三方的浏览器控件(这个好似比较方便,我的老师也是这样建议我)向大家推荐一个 Lodop打印控件 2.用CSS写好模板,然后直接用页面打印的方法(应该是这样吧) 以上两种还没有尝试,这两天陆续尝试) 3.用微软自己的ActiveX控件(ActiveX控件可以实现调用本地的文件等操作(之前试过调用cmd,实现shutdow
用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置. 准备数据,创建一个对象,将是存储DropDownList控件每个Item数据. 复制代码代码如下: Imports Microsoft.VisualBasic Namespace Insus.NET Public Class Catalog Private _ID As Integer Private _Name As String Public Property ID As Integer Get
javascript模拟评分控件实现方法

本文实例讲述了javascript模拟评分控件实现方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置style(评分效果)</titl
Javascript操作select控件代码实例

这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下新增.修改.删除.选中.清空.判断存在等 1.判断select选项中是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect
javascript表单控件实例讲解

本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e
javascript实现日历控件(年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo
JavaScript判断FileUpload控件上传文件类型

为了代码变得更加简捷,笔者使用了正则表达式来获取文件扩展名,如果读者对正则表达式不太了解或者从来没有接触过,请马上恶补一下吧!毕竟它非常重要,大多数的编程语言都支持正则表达式. 大家都知道,后台获取FileUpload扩展名方法: string ext = Path.GetExtension(fu.PostedFile.FileName); JS判断FileUpload控件上传文件的扩展名: <html xmlns="http://www.w3.org/1999/xhtml"&g

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

相关推荐

随机推荐