javascript编程开发中取色器及封装$函数用法示例


Posted in Javascript onAugust 09, 2017

本文实例讲述了javascript编程开发中取色器及封装$函数用法。分享给大家供大家参考,具体如下:

1.封装$函数

function $(str){
      //如果传入的是'#' 则选择id标签
      //如果传入的是'.' 则选择所有的类名标签
      //如果传入的既不是'#也不是'.' 选择复合标签
      //判断传入的值
      if(typeof str !='string'){
        console.log('传入的参数有误!');
        return null;
      } 
      //获取参数的第一个字母
      var firstChar=str.charAt(0);
      var name=str.substr(1);
      switch(firstChar){
        case '#':
          console.log('id选择器');
          return document.getElementById(name);
          break;
        case '.':
          //类选择器:getElementsByClassName是在js中新加入的,对于老的ie6,ie7无法兼容
          console.log('类选择器');
          //兼容性
          //1.判断是否能够使用getElementsByClassName
          if(!document.getElementsByClassName){
            return document.getElementsByClassName(name);
          }else{
            //2.获取所有的标签
            //3.逐个判断是否带有该类名
            //4.如果有则添加到数组中
            var resultElements=[];
            var elements=document.getElementsByTagName('*');
            // console.log(element);
            for(var i=0;i<elements.length;i++){
              var element=elements[i];
              var class_name=element.className.split(' ');
              for(var j=0;j<class_name.length;j++){
                if(class_name[j]==name){
                    //加入到数组中去
                    resultElements.push(elements[i]);
                    console.log(resultElements);
                }
              }
            }
            return resultElements;
          }
          break;
        default:
          console.log('标签选择器');
          name=str.substr(0);
          return document.getElementsByTagName(name);
      }
    }

2.取色器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="js/select.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 300px;
      height: 300px;
      background:rgb(0,0,0);
      margin:20px;
    }
    #btn{
      padding:0 20px;
    }
    input{
      width: 100px;
    }
  </style>
  <script>
    //javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性。但是,currentStyle在FIrefox和Chrome下不支持,需要使用如下兼容性代码
    HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
      return this.ownerDocument.defaultView.getComputedStyle(this, null); 
    });
    function bgColor(obj){
      return obj.currentStyle.backgroundColor;
    }
    function compare(color1,color2){
      if(color1>color2){
        return -1;
      }else if(color1<color2){
        return 1;
      }else{
        return 0;
      }
    }
    window.onload=function(){
      var red;
      var green;
      var blue;
      var boxColor=[];
      $('#btn').onclick=function(){
        red=Number($('#red').value);
        green=Number($('#green').value);
        blue=Number($('#blue').value);
        boxColor=bgColor($('#box')).split('(');
        boxColor=boxColor[1].split(')');
        boxColor=boxColor[0].split(',');
        if(red>255||red<0 || green>255||green<0 || blue>255||blue<0){
          alert("颜色值出错了!");
          return;
        }
        //变色定时器
        var timer=setInterval(function(){
          boxColor[0]=Number(boxColor[0])+compare(boxColor[0],red);
          boxColor[1]=Number(boxColor[1])+compare(boxColor[1],green);
          boxColor[2]=Number(boxColor[2])+compare(boxColor[2],blue);
          $('#box').style.background='rgb('+boxColor[0]+','+boxColor[1]+','+boxColor[2]+')';
          if(boxColor[0]==red&&boxColor[1]==green&&boxColor[2]==blue){
            clearInterval(timer);
          }
        },10);
      }
    }
  </script>
</head>
<body>
  <div id="box"></div>
  red:<input type="text" id="red">
  green:<input type="text" id="green">
  blue:<input type="text" id="blue">
  <button id="btn">取色</button>
</body>
</html>

点击此处查看在线演示效果

Javascript 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
js字符串操作方法实例分析
May 06 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vuejs父子组件之间数据交互详解
Aug 09 #Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 #Javascript
浅谈react+es6+webpack的基础配置
Aug 09 #Javascript
js中less常用的方法小结
Aug 09 #Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 #Javascript
基于Vue实例对象的数据选项
Aug 09 #Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
You might like
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
javascript实现评分功能
2020/06/24 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Django中的session用法详解
2020/03/09 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
大学生简历的个人自我评价
2013/12/04 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
公司成立感言
2014/01/11 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2014年底个人工作总结
2015/03/10 职场文书
圣诞晚会主持词
2015/07/01 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python