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 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript 原型继承介绍
Aug 30 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python多进程读图提取特征存npy
2019/05/21 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
文明餐桌活动方案
2014/02/11 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
乳制品整治工作方案
2014/05/29 职场文书
会议主持词结束语
2015/07/03 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js