Social Icons

Pages

Example of HTML+JAVA to see how much time had been spent by you on my blog










Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.


HTML+JAVA to see how much time had been spent by us there


<html>
<head>
<script>
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout(function(){timedCount()},1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onclick="stopCount()" />
</form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.
</p>
</body>
</html>

Error message











Click the button to wait 2 seconds, then alert "Hello".

After clicking away the alert box, an new alert box will appear in 2 seconds. This goes on forever...






Loop function in java


<html>
<body>

<p>Click the button to do a loop with a break.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

To get Cookies value

function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

Try it and have fun


<html>
<body>

<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
setInterval(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

Must try this html


<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;

var person=prompt("Please enter your name","Harry Potter");

if (person!=null)
  {
  x="Hello " + person + "! How are you today?";
  document.getElementById("demo").innerHTML=x;
  }
}
</script>

</body>
</html>

A pop up alert box in java


<html>
<head>
<script>
function myFunction()
{
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box" />

</body>
</html>

java operator for increament


<html>
<body>

<p>Given that y=5, calculate x=y++, and display the result.</p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
var y=5;
var x=y++;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>

<p><strong>Note:</strong> Both variables, x and y, are affected.</p>
</body>
</html>

css Positioning


<html>
<head>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>

</html>

css attribute selector


<html>
<head>
<style>
[lang|=en]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>Will not apply to:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>