Thủ thuật MS: Code

Bạn muốn đếm ngược thời gian đến 1 sự kiện nào đó trong tương lai để chèn vào web/ blog của bạn? Hãy sửa lại thông tin cần thiết và chèn vào nơi bạn muốn hiển thị.

Code

<div style="background-image:url();"><span style="font-weight:bold; font-size: 18px; color:#FF0000;"><!-- Display the countdown timer in an element --><br />
<p id="demo"></p><script>
// Set the date we're counting down to
var countDownDate = new Date("Feb 5, 2019 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + " ngày: " + hours + " giờ:  "
  + minutes + " phút: " + seconds + " giây ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Chúc mừng năm mới!";
  }
}, 1000);
</script>
<div id="countbox1" >
</div></span>
</div>

Đây là code tạo pháo hoa cho nền body,với hiệu ứng này pháo hoa không ào ạt mà chỉ có tính chất điểm tô cho nền blogspot mà cụ thể chỉ thấy ở các khe trống giữa main và sidebar và toàn bộ body khi xem trên laptop.

Khi rê chuột vào vùng hiệu ứng có hiệu lực, chỏ chuột có hình dấu cộng và pháo hoa sẽ xuất hiện nếu nhấp chuột.

Dán đoạn css này vào trước thẻ </head>

<style type='text/css'>
canvas{
cursor:crosshair;
position:fixed;
width:100%;
height:100%;
background:none;
display:block
</style>

Dán đoạn html này vào sau thẻ <body>

<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>

Dán đoạn javascript sau vào trước thẻ </body>

<script type='text/javascript'>
      //<![CDATA[
      window.requestAnimFrame = ( function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function( callback ) {
          window.setTimeout( callback, 1000 / 60 );
        };
      })();
var canvas = document.getElementById( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    cw = window.innerWidth,
    ch = window.innerHeight,
    fireworks = [],
    particles = [],
    hue = 120,
    limiterTotal = 5,
    limiterTick = 0,
    timerTotal = 30,
    timerTick = 0,
    mousedown = false,
    mx,
    my;
      canvas.width = cw;
      canvas.height = ch;
      function random( min, max ) {
        return Math.random() * ( max - min ) + min;
      }
      function calculateDistance( p1x, p1y, p2x, p2y ) {
        var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
        return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
      }
      function Firework( sx, sy, tx, ty ) {
        this.x = sx;
        this.y = sy;
        this.sx = sx;
        this.sy = sy;
        this.tx = tx;
        this.ty = ty;
        this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
        this.distanceTraveled = 0;
        this.coordinates = [];
        this.coordinateCount = 3;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = Math.atan2( ty - sy, tx - sx );
        this.speed = 2;
        this.acceleration = 1.05;
        this.brightness = random( 50, 70 );
        this.targetRadius = 1;
      }
      Firework.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        if( this.targetRadius < 8 ) {
          this.targetRadius += 0.3;
        } else {
          this.targetRadius = 1;
        }
        this.speed *= this.acceleration;
        var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
        this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
        if( this.distanceTraveled >= this.distanceToTarget ) {
          createParticles( this.tx, this.ty );
          fireworks.splice( index, 1 );
        } else {
          this.x += vx;
          this.y += vy;
        }
      }
      Firework.prototype.draw = function() {
        ctx.beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
        ctx.stroke();
        ctx.beginPath();
        ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
        ctx.stroke();
      }
      function Particle( x, y ) {
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinateCount = 5;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = random( 0, Math.PI * 2 );
        this.speed = random( 1, 10 );
        this.friction = 0.95;
        this.gravity = 1;
        this.hue = random( hue - 50, hue + 50 );
        this.brightness = random( 50, 80 );
        this.alpha = 1;
        this.decay = random( 0.015, 0.03 );
      }
      Particle.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        this.speed *= this.friction;
        this.x += Math.cos( this.angle ) * this.speed;
        this.y += Math.sin( this.angle ) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if( this.alpha <= this.decay ) {
          particles.splice( index, 1 );
        }
      }
      Particle.prototype.draw = function() {
        ctx. beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
        ctx.stroke();
      }
      function createParticles( x, y ) {
        var particleCount = 30;
        while( particleCount-- ) {
          particles.push( new Particle( x, y ) );
        }
      }
      function loop() {
        requestAnimFrame( loop );
        hue= random(0, 360 );
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect( 0, 0, cw, ch );
        ctx.globalCompositeOperation = 'lighter';
        var i = fireworks.length;
        while( i-- ) {
          fireworks[ i ].draw();
          fireworks[ i ].update( i );
        }
        var i = particles.length;
        while( i-- ) {
          particles[ i ].draw();
          particles[ i ].update( i );
        }
        if( timerTick >= timerTotal ) {
          if( !mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
          }
        } else {
          timerTick++;
        }
        if( limiterTick >= limiterTotal ) {
          if( mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
          }
        } else {
          limiterTick++;
        }
      }
      canvas.addEventListener( 'mousemove', function( e ) {
        mx = e.pageX - canvas.offsetLeft;
        my = e.pageY - canvas.offsetTop;
      });
      canvas.addEventListener( 'mousedown', function( e ) {
        e.preventDefault();
        mousedown = true;
      });
      canvas.addEventListener( 'mouseup', function( e ) {
        e.preventDefault();
        mousedown = false;
      });
      window.onload = loop;
      //]]>
    </script>

Thủ thuật MS

Thứ Sáu, 9 tháng 3, 2018

Code đồng hồ đếm ngược

Code

Code hiệu ứng bắn pháo hoa cho Blogspot

Dán đoạn css này vào trước thẻ </head>

Dán đoạn html này vào sau thẻ <body>

Dán đoạn javascript sau vào trước thẻ </body>

Code tuyết rơi cho web

Code

CHUYÊN MỤC

TIỆN ÍCH

QUẢNG CÁO của Anonymous

Nổi bật

Theo dõi và liên hệ

Other domain

Quảng cáo