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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
javascript简易画板开发
Apr 12 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
python模块restful使用方法实例
2013/12/10 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python中的Numpy矩阵操作
2018/08/12 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
司仪主持词两篇
2014/03/22 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
庆七一活动总结
2014/08/27 职场文书
Python中如何处理常见报错
2022/01/18 Python
Elasticsearch 批量操作
2022/04/19 Python