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禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
node+vue实现文件上传功能
May 28 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
节能环保口号
2014/06/12 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL