API tools faq
paste
Advertisement
allcoma

allcoma2

allcoma
Sep 27th, 2014
389
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="windows-1251">
  5.         <title>Document</title>
  6.         <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  7.         <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  8.         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  9.         <script type="text/javascript" src="http://boedesign.com/demos/gritter/js/jquery.gritter.js"></script><!-- тырим  плагин -->
  10.         <link rel="stylesheet" type="text/css" href="http://boedesign.com/demos/gritter/css/jquery.gritter.css" />
  11.  
  12.  
  13.         <script type="text/javascript">
  14. function init(d, r, g, b, r1, g1, b1) {
  15.     d.colors = new Array();
  16.     d.colors.push(r);
  17.     d.colors.push(g);
  18.     d.colors.push(b);
  19.     d.colors.push(r1);
  20.     d.colors.push(g1);
  21.     d.colors.push(b1);
  22. }
  23. interval = []
  24. once= true
  25. function zapusk(d) {
  26.     s = '#';
  27.     for (var i = 0; i < 3; i++) {
  28.         d.colors[i] += d.colors[i + 3];
  29.         if (d.colors[i] < 0) {
  30.             d.colors[i] = 0;
  31.             d.colors[i + 3] = -d.colors[i + 3];
  32.         }
  33.         if (d.colors[i] > 0xff) {
  34.             d.colors[i] = 0xff;
  35.             d.colors[i + 3] = -d.colors[i + 3];
  36.         }
  37.         s1 = Math.floor(d.colors[i]).toString(16);
  38.         while (s1.length < 2) {
  39.             s1 = '0' + s1;
  40.         }
  41.         s += s1;
  42.     }
  43.     d.style.backgroundColor = s;
  44. }
  45. function start() {
  46.     var h = $('#i0').val()||1; // шаг цвета от -10 до 10
  47.     var o = parseInt($('#i1').val())||1111; // число скачков
  48.     var m = parseInt($('#i2').val())||12345; // пройденное время в секундах
  49.     var a = parseInt($('#i3').val())||999999999999999; // пройденное время в секундах максимальное
  50.     var b = parseInt($('#i4').val())||0.001; // 1 цвет в столько секундах
  51.     var c = parseInt($('#i5').val())||a / b; // такой цвет через пройденное время
  52.     var t = parseInt($('#i6').val())||255; // диапазон количество цветов
  53.    
  54.     $('#i0').val(h)
  55.     $('#i1').val(o)
  56.     $('#i2').val(m)
  57.     $('#i3').val(a)
  58.     $('#i4').val(b)
  59.     $('#i5').val(c)
  60.     $('#i6').val(t)
  61.    
  62.    
  63.     var f = Math.floor(c);
  64.     var u = c / t;
  65.     var q = Math.floor(u);
  66.     var z = t * q;
  67.     var x = f - z;
  68.     var e = Math.floor(c) - t * (Math.floor((c) / t)); // перевод такого цвета через пройденное время в заданный диапазон цветов
  69.     var v = Math.floor(a / b) - t * (Math.floor((a / b) / t)); // перевод такого цвета через пройденное время в заданный диапазон цветов
  70.     var p = (((Math.floor(a / b) - t * (Math.floor((a / b) / t))) * o) + (Math.floor(m / b) - t * (Math.floor((m / b) / t)))); // скачки во времени
  71.     var r = Math.floor((((Math.floor(a / b) - t * (Math.floor((a / b) / t))) * o) + (Math.floor(m / b) - t * (Math.floor((m / b) / t))))) - t * (Math.floor(((((Math.floor(a / b) - t * (Math.floor((a / b) / t))) * o) + (Math.floor(m / b) - t * (Math.floor((m / b) / t))))) / t)); // скачки во времени в заданный диапазон цветов
  72.     var s = (((Math.ceil(r * 2)) * 255)) - 255; // скачек в черно белое 0 и 255init(document.getElementById('cvet1'), r, 1, 1, 1, 1, 1); // цвет
  73.     var n=(((Math.ceil(Math.random() *2))*255))-255; // черно белое 0 и 255 случайно
  74.    
  75.    
  76.     init($(".quard")[0], r, 1, 1, h, 1, 1); // цвет
  77.     init($(".quard")[1], 1, r, 1, 1, h, 1); // цвет
  78.     init($(".quard")[2], 1, 1, r, 1, 1, h); // цвет
  79.     init($(".quard")[3], s, s, s, 1, 1, 1); // цвет
  80.     init($(".quard")[4], Math.floor(a / (b + 0.002)) - t * (Math.floor((a / (b + 0.002)) / t)), 1, 1, 1, 1, 1); // цвет
  81.     init($(".quard")[5], Math.floor(a / (b + 0.003)) - t * (Math.floor((a / (b + 0.003)) / t)), 1, 1, 1, 1, 1); // цвет
  82.     init($(".quard")[6], Math.floor(a / (b + 0.004)) - t * (Math.floor((a / (b + 0.004)) / t)), 1, 1, 1, 1, 1); // цвет
  83.     init($(".quard")[7], Math.floor(a / (b + 0.005)) - t * (Math.floor((a / (b + 0.005)) / t)), 1, 1, 1, 1, 1); // цвет
  84.     init($(".quard")[8], Math.floor(a / (b + 0.006)) - t * (Math.floor((a / (b + 0.006)) / t)), 1, 1, 1, 1, 1); // цвет
  85.     interval.push(setInterval(function() {
  86.         zapusk($(".quard")[0])
  87.     }, 1));
  88.     interval.push(setInterval(function() {
  89.         zapusk($(".quard")[1])
  90.     }, 2));
  91.     interval.push(setInterval(function() {
  92.         zapusk($(".quard")[2])
  93.     }, 3));
  94.     interval.push(setInterval(function() {
  95.         zapusk($(".quard")[3])
  96.     }, 4));
  97.     interval.push(setInterval(function() {
  98.         zapusk($(".quard")[4])
  99.     }, 5));
  100.     interval.push(setInterval(function() {
  101.         zapusk($(".quard")[5])
  102.     }, 6));
  103.     interval.push(setInterval(function() {
  104.         zapusk($(".quard")[6])
  105.     }, 7));
  106.     interval.push(setInterval(function() {
  107.         zapusk($(".quard")[7])
  108.     }, 8));
  109.     interval.push(setInterval(function() {
  110.         zapusk($(".quard")[8])
  111.     }, 9));
  112. }
  113. window.onload =  function(){
  114.    
  115.     $(document).on( "click","#start",  function(event){
  116.  
  117. for (var i = 0; i < interval.length; i++) { //останавливаем   предыдушее  барахло
  118.     clearInterval(interval[i]);
  119. };
  120. start()// стартуем новый  цикл  с введенными значениями
  121. if(once){
  122. $.gritter.add({
  123.     // (string | mandatory) the heading of the notification
  124.     title: 'читай быстрее и внимательно, больше не покажу ',
  125.     // (string | mandatory) the text inside the notification
  126.     text: ' в поля ввода   подставлены значения   с которыми запустилась карусель цветов'})
  127. once = false;
  128. }
  129. event.preventDefault();
  130.     })//on
  131. }//  onload
  132. </script>
  133.         <style>
  134.         #cell{width:402px;
  135.         height:402px;
  136.         border:1px solid  rgb(00,00,00);}
  137.         .quard{
  138.             width: 133px;
  139.             height: 133px;
  140.             float: left;
  141.         }
  142.         </style>
  143.         <script>
  144.         </script>
  145.     </head>
  146.     <body>
  147.         <div class="container">
  148.             <div class="row">
  149.                 <div class="col-md-6">
  150.                     <form action="" role="form">
  151.                        
  152.                         <div class="form-group"><label for="i0">шаг цвета от -10 до 10</label><input type="text" class="form-control" placeholder="шаг цвета от -10 до 10" id="i0"></div>
  153.                         <div class="form-group"><label for="i1">число скачков</label><input type="text" class="form-control" placeholder="число скачков" id="i1"></div>
  154.                         <div class="form-group"><label for="i2">пройденное время в секундах </label><input type="text" class="form-control" placeholder="пройденное время в секундах " id="i2"></div>
  155.                         <div class="form-group"><label for="i3">пройденное время в секундах максимальное</label><input type="text" class="form-control" placeholder="пройденное время в секундах максимальное" id="i3"></div>
  156.                         <div class="form-group"><label for="i4">цвет в столько секундах</label><input type="text" class="form-control" placeholder="цвет в столько секундах" id="i4"></div>
  157.                         <div class="form-group"><label for="i5">такой цвет через пройденное время</label><input type="text" class="form-control" placeholder="такой цвет через пройденное время" id="i5"></div>
  158.                         <div class="form-group"><label for="i6">диапазон количество цветов</label><input type="text" class="form-control" placeholder="диапазон количество цветов" id="i6"></div>
  159.                         <div class="form-group"><label for=""></label><button class="btn btn-danger" id="start">поехали</button></div>
  160.                     </form>
  161.                 </div>
  162.                 <div class="col-md-6"><div class="center-block" id="cell">
  163.                     <div class="quard" style="background-color: rgb(0, 0, 0);"></div>
  164.                     <div class="quard" style="background-color: rgb(0, 0, 255);"></div>
  165.                     <div class="quard" style="background-color: rgb(0, 255, 0);"></div>
  166.                     <div class="quard" style="background-color: rgb(0, 255, 255);"></div>
  167.                     <div class="quard" style="background-color: rgb(255, 0, 0);"></div>
  168.                     <div class="quard" style="background-color: rgb(255, 0, 255);"></div>
  169.                     <div class="quard" style="background-color: rgb(255, 255, 0);"></div>
  170.                     <div class="quard" style="background-color: rgb(255, 255, 255);"></div>
  171.                     <div class="quard" style="background-color: rgb(0, 0, 0);">
  172.                        
  173.                     </div></div></div>
  174.                 </div>
  175.             </div>
  176.         </body>
  177.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!