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 相关文章推荐
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
原生js 实现表单验证功能
Feb 08 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 404错误页面实现代码
2009/06/22 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
大学生水果店创业计划书
2014/01/28 职场文书
倡议书范文
2014/04/16 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
工会主席事迹材料
2014/06/03 职场文书
工商管理自荐书
2014/07/06 职场文书
入党自传范文2015
2015/06/26 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
高中语文教学反思范文
2016/02/16 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android