如何在HTML5，JavaScript，CSS，Sass中实现随机按钮颜色生成器

Question

I wanted to know how can I generate a random button color, and the -webkit-box-shadow -moz-box-shadow box-shadow random color, I have this code so far: 我想知道如何生成随机按钮颜色，以及-webkit-box-shadow -moz-box-shadow框阴影随机颜色，到目前为止，我有以下代码：

    <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World</title>

  <style>
      body { background-image: url(city.jpg) }

      a {
          position: relative;
          margin: 100px auto;

          width: 160px;  
          height: 160px;

          background-color: rgba(7,148,255,1);

          font-family: 'Sans Serif';
          font-weight: 700;
          font-size: 3em;
          text-align: center;
          text-decoration: none;
          color: rgba(255,255,255,1);

          display: block;

          padding: 4px;

          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px;

#THE RANDOM CODE COLOR WILL BE APPLIED FROM HERE
              -webkit-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
              -moz-box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
              box-shadow: 0px 9px 0px rgba(22,171,22,1), 0px 9px 25px rgba(0,0,0,.7);
#TO HERE

          -webkit-transition: all .1s ease;
          -moz-transition: all .1s ease;
          -ms-transition: all .1s ease;
          -o-transition: all .1s ease;
          transition: all .1s ease;
}

a:active {

#AND FROM HERE
        -webkit-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
        -moz-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
        box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
#TO HERE
        position: relative;
        top: 6px;
} 

</style>

  <script>
    // We really want to disable
    window.open    = function() {};
    window.alert   = function() {};
    window.print   = function() {};
    window.prompt  = function() {};
    window.confirm = function() {};
  </script>

  <script>
  // #killanim is only being used in lab full view, maybe we could
  // use it everywhere :D
//if (window !== window.top && window.top.__stop_animations !== false) {
if (window !== window.top && location.hash !== '#dontkillanim') {
  window.is_webkit = /(webkit)[ \/]([\w.]+)/.exec(window.navigator.userAgent.toLowerCase())

  window.max_timer = window.is_webkit ? 2000 : 20

  // Let's try to prevent user's from OOM'ing esp. in FX and Op.
  // First, we need to stop CSS Animations, after say 5s ?
  //
  // Ok, so i tried 5s, but there are some problems. Firstly, Firefox
  // and opera behave same. little improvement only. So making it 3s now.
  //
  // Tutorial: https://developer.mozilla.org/en/CSS/CSS_animations
  // Help: http://www.sitepoint.com/css3-animation-javascript-event-handlers

  var pauseCSSAnimations = function() {

    var stopCSSAnimations = function() {
      // Get the Body Element
      var body = document.getElementsByTagName('body')[0];

      // We'll setup animationstart and animationiteration
      // events only. No need for animationend, cuz the
      // animation might be 30minutes long. animationiteration
      // cuz the animation might be .000002ms long.

      // addEventListener is perfectly supported in IE9.
      // and we don't care about IE8 and below. Let those
      // browsers die in a fire!

      body.addEventListener('webkitAnimationStart', stopAnimation, false);
      body.addEventListener('webkitAnimationIteration', stopAnimation, false);
      body.addEventListener('animationstart', stopAnimation, false);
      body.addEventListener('animationiteration', stopAnimation, false);
    };

    // e is the event object bro ;)
    var stopAnimation = function(e) {
      // e.srcElement? lulz...
      var target_el = e.target;
      var e_type = e.type.toLowerCase();

      if (e_type.indexOf('animationstart') !== -1 || e_type.indexOf('animationiteration') !== -1) {
        // LOL, we need to stop the animation now!
        // setInterval? lulz...

        setTimeout(false, function() {

          if (target_el.style.webkitAnimationPlayState !== 'paused')
            target_el.style.webkitAnimationPlayState = 'paused';

          if (target_el.style.MozAnimationPlayState !== 'paused')
            target_el.style.MozAnimationPlayState = 'paused';

          if (target_el.style.animationPlayState !== 'paused')
            target_el.style.animationPlayState = 'paused';

        }, window.max_timer);
      }
    }

    stopCSSAnimations();

  };

  // Next we need to pause/stop JS Animations

  var pauseJSAnimations = function() {

    // We need to override setInterval, setTimeout
    // in such a way, that all the calls register their
    // ids in an array and we can clear all the ids
    // after a given time.
    //
    // Don't trust me ? Lern2Google:
    // http://stackoverflow.com/a/11374151/1437328
    // http://stackoverflow.com/a/8524313/1437328
    // http://stackoverflow.com/a/8769620/1437328
    //
    // 3rd one is pretty much the code you need!
    //
    // Thank you for building your trust in me now :D

    window.setInterval = (function(oldSetInterval) {
      var registered = [];

      var f = function() {
        var id;
        // .. this!
        var $this = this;
        // setInterval accepts n no. of args
        var args = arguments;
        // What if someone used the awesome Function.bind() ?
        // I am sure we want the awesome apply() then ;)

        // this is my awesome brain usage. if first val is nonsense,
        // then don't register, heh.
        if (typeof args[0] !== 'function' && args[0] === false) {
          args = Array.prototype.slice.call(arguments);
          args = args.slice(1);

          id = oldSetInterval.apply($this, args)
        }
        else {
          id = oldSetInterval.apply($this, args);
          registered.push(id);
        }

        //console.log(registered);
        // Need to return the Interval ID
        return id;
      };

      f.clearAll = function() {
        var r;
        while (r = registered.pop()) {
          clearInterval(r);
        }
      };

      return f;
    })(window.setInterval);

    window.setTimeout = (function(oldSetTimeout) {
      var registered = [];

      var f = function() {
        var id;
        // .. this!
        var $this = this;
        // setInterval accepts n no. of args
        var args = arguments;
        // What if someone used the awesome Function.bind?
        // I am sure we want the awesome apply then ;)

        // this is my awesome brain usage. if first val is nonsense,
        // then don't register, heh.
        if (typeof args[0] !== 'function' && args[0] === false) {
          args = Array.prototype.slice.call(arguments);
          args = args.slice(1);

          id = oldSetTimeout.apply($this, args)
        }
        else {
          //console.log('lolzzzzz');
          id = oldSetTimeout.apply($this, args);
          registered.push(id);
        }

        //console.log(registered);
        // Need to return the Timeout ID
        return id;
      };

      f.clearAll = function() {
        var r;
        while (r = registered.pop()) {
          clearTimeout(r);
        }
      };

      return f;
    })(window.setTimeout);

    setTimeout(false, function() {
      setTimeout.clearAll();
      setInterval.clearAll();
    }, window.max_timer);


    // Time to Cancel rAF's Bro :)
    // You know things are harder when people are actually
    // using shims for rAF :/ So we need to test for vendors!

    window.__requestAnimFrame = window.requestAnimationFrame || undefined;
    window.__cancelAnimFrame = window.cancelAnimationFrame || undefined;
    window.__vendors = ['webkit', 'moz', 'ms', 'o'];
    window.__registered_rafs = [];

    // I can't think of a good way to cancel rAF's
    // So maybe lets use something similar to our other canceller's

    window.__requestFrame = function(cb) {
      if (!window.__requestAnimFrame) return;

      var req_id = window.__requestAnimFrame(cb);
      __registered_rafs.push(req_id);

      return req_id;
    };

    // Determine the proper VendorPrefixedFunctionName
    if (!window.__requestAnimFrame) {
      for (var x = 0; x < window.__vendors.length; x++) {
          if (!window.__requestAnimFrame) {
            window.__requestAnimFrame = window[window.__vendors[x]+'RequestAnimationFrame'];
            window[window.__vendors[x]+'RequestAnimationFrame'] = __requestFrame;
          }

          if(!window.__cancelAnimFrame) {
            // I came across webkitCancelAnimationFrame and webkitCancelRequestAnimationFrame
            // No idea about the difference, so maybe lets ||'fy it

            window.__cancelAnimFrame = window[window.__vendors[x]+'CancelAnimationFrame'] ||
                                        window[window.__vendors[x]+'CancelRequestAnimationFrame'];
          }
      }
    }

    // We have our proper vendor prefixed raf objects now :)
    // So let's go mad!!!
    // Let's Cancel our rAF's
    setTimeout(false, function() {
      if (!window.__requestAnimFrame) return;

      var r;
      while (r = window.__registered_rafs.pop()) {
        window.__cancelAnimFrame(r);
      }
    }, window.max_timer);

  };

  // Had to place outside pauseAnimations to work properly
  // else it was getting called afterwards code setTimeout/Interval executed
  if (window !== window.top)
    pauseJSAnimations();

  var __pauseAnimations = function() {
    if (window !== window.top)
      pauseCSSAnimations();
  };
}

else {
  __pauseAnimations = function() {};
}

  </script>
</head>

<body onload="__pauseAnimations();">

<a href="javascript:void(0);">!</a>
<script>
//For button
</script>

</body>
</html>

And I want to imlement this SASS code to make the -webkit-box-shadow -moz-box-shadow box-shadow random color: 我想实现此SASS代码，以使-webkit-box-shadow -moz-box-shadow box-shadow随机颜色：

    $shadows:1000;

@function randomBoxShadow() {

    $shadow: '0' +'px '+ '0' +'px '+ '9' +'px rgb('+random(255)+','+random(255)+','+random(255)+')';
    @return unquote($shadow);

}

.shadwo {
    $box-shadow:0 0 10px 0 #000;
    @for $i from 2 through $shadows {
        $box-shadow: $box-shadow+','+ randomBoxShadow();
    }
    box-shadow:unquote($box-shadow);
}

Answer 1

You can either implement the random functions with pure javascript or use SASS js compiler. 您可以使用纯JavaScript实现随机函数，也可以使用SASS js编译器。 There is sass.js compiler (similar to LESS.js) which you can use to compile your SASS functions in real-time. 您可以使用sass.js编译器（类似于LESS.js）来实时编译SASS函数。

如何在HTML5，JavaScript，CSS，Sass中实现随机按钮颜色生成器

问题描述

1 个解决方案

解决方案1
0 2016-10-13 16:36:12

如何在HTML5，JavaScript，CSS，Sass中实现随机按钮颜色生成器

问题描述

1 个解决方案

解决方案1 0 2016-10-13 16:36:12

解决方案1
0 2016-10-13 16:36:12