PROG 3

3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing
font size in the interval of 100ms in RED COLOR, when the font size reaches
50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font size
decreases to 5pt.

program3.html

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT GROWING';
ids.setAttribute('style', "font-size: " + fs + "px; color: red");
fs += 5;
if(fs >= 50 ){
clearInterval(var1);
var2 = setInterval(deTimer, 1000);
}
}
function deTimer() {
fs -= 5;
ids.innerHTML = 'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
if(fs === 5 ){
clearInterval(var2);
}
}
</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

PROG 6

6. Write a PHP program to keep track of the number of visitors visiting the web page and to display this count of visitors, with proper headings. program6.php <?php print "<h3> REFRESH PAGE </h3>"; $name="counter.txt"; $file = fopen($name,"r"); $hits= fscanf($file,"%d"); fclose($file); $hits[0]++; $file = fopen($name,"w"); fprintf($file,"%d",$hits[0]); fclose($file); print "Total number of views: ".$hits[0]; ?>
Read more

PROG 7

7. Write a PHP program to display a digital clock which displays the current time of the server. program7.php <!DOCTYPE HTML> <html> <head> <meta http-equiv="refresh" content="1"/> <style>  p {    color:white;    font-size:90px;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);   }   body{background-color:black;}  </style>  <p> <?php echo date(" h: i : s  A");?> </p> </head> <html>
Read more

PROG 2

2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTML text that displays the resulting values in an HTML table format. program2.html <!DOCTYPE HTML> <html> <head> <style> table,tr, td { border: solid black; width: 33%; text-align: center; border-collapse: collapse; background-color:lightblue; } table { margin: auto; } </style> <script> document.write( "<table><tr><th colspan='3'> NUMBERS FROM 0 TO 10 WITH THEIR SQUARES AND CUBES </th></tr>" ); document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" ); for(var n=0; n<=10; n++) { document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" ) ; } document.write( "</table>" ) ...
Read more