Fun With javaScript !!


Want the code ?
Here we go.



<!DOCTYPE html>
<html>
<head>
    <title>::</title>
    <meta charset='utf-8'>
    <script type="text/javascript" src='jquery.min.js'></script>
    <!-- download jquery  -->
    <script type="text/javascript">


/*

    EDIT BELOW VALUES

*/
    var message=" Create a class called SumOfEven that include the one static variable for getting the stating number and  and another variable for getting the N th term in you series of calculation. Your class should have two methods one for reading the value and another for calculating the SumOfEven Number in the series and displaythe result.--- Thank you";
    var speed=50;
    var element_id="x";  //YOUR ELEMENT ID
    var colors=Array("violet","indigo","blue","green","yellow","orange","red","maroon","deeppink","teal");
/*

    DONT NEED TO EDIT BELOW CODE   

*/   
    var len=message.length;
    var cl=colors.length;
    var color_code=0;
    var interval=setInterval(myfun,speed);
    var x=0;
    function myfun ()
    {
        var rand=Math.floor(Math.random()*(cl-1));
        var color=colors[rand]
        var m=message.charAt(x);
        $("#"+element_id).html($("#"+element_id).html()+"<font color="+color+">"+m+"</font>");
        x++;
        if(x==len)
        {
                    clearInterval(interval);
                    x=0;
        }
        color_code=color_code+1;
        if (color_code==cl) {
            color_code=0
        };
    }
 window.addEventListener("mousemove",function  (e)
 {
     var x=e.clientX;
     var y=e.clientY;
     //alert(x+""+y);
     setTimeout(fun1,100);
     setTimeout(fun2,150);
     setTimeout(fun3,200);
     function fun1()
     {
         document.getElementById("a1").style.top=25+y+"px";
         document.getElementById("a1").style.left=x+"px";
     }
     function fun2()
     {
         document.getElementById("a2").style.top=30+y+"px";
         document.getElementById("a2").style.left=10+x+"px";
     }
     function fun3()
     {
         document.getElementById("a3").style.top=35+y+"px";
         document.getElementById("a3").style.left=40+x+"px";
     }

 },false)
    </script>
</head>
<body>
    <div  style="color:black;font-size:40px;font-family:Droid Serif" id='x'></div>
    <img src='logo.png' id='a1' style='opacity:0.3;width:20px;height:20px;trasition:0.2s;position:fixed;top:0px;left:0px;'>
    <img id='a2' src='logo.png' style='width:40px;opacity:0.3;height:40px;trasition:0.2s;position:fixed;top:0px;left:10px;'>
    <img id='a3' src='logo.png' style='width:80px;height:80px;opacity:0.3;trasition:0.2s;position:fixed;top:0px;left:40px;'>
</body>
</html>


like on facebook. https://www.facebook.com/webawesomergukt/

Comments