<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-rule: 10px inset orange;
column-count: 4;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule-color: black;
columns: 70px 6;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column rule color property</h2>
<div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</div>
</body>
</html>
<html>
<head>
<script>
<!--
function display() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="display()" value="Click me" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-rule: 10px inset orange;
column-count: 4;
column-width: 200px;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule-color: black;
column-width: 150px;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column width property</h2>
<div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</div>
</body>
</html>
<html>
<head>
<script>
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
<html>
<head>
<script>
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
class Department {
constructor() {}
static msg() {
return 'Hello';
}
}
class Employee extends Department {
constructor() {}
static displayMsg() {
return super.msg() + ' World!';
}
}
document.write(Employee.displayMsg());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
var dept = new Object();
dept.employee = "Amit";
dept.department = "Technical";
dept.technology ="Java";
document.getElementById("test").innerHTML =
dept.employee + " is working on " + dept.technology + " technology.";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function display( ) {
click.onclick = styleMe;
uname.onclick = styleMe;
}
function styleMe ( ) {
this.style.backgroundColor = "#000000";
this.style.color = "#FFFFFF";
}
</script>
</head>
<body onload="display()" >
<div id="uname"> Hello Wordl!</div>
<button id="click"> Click</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color:hsl(0,100%,50%);
}
h2 {
background-color:rgb(0,0,255);
color: rgb(255,255,255);
}
p {
background-color:rgba(255,0,0,0.9);
}
</style>
</head>
<body>
<h1>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
function sortArg() {
var args = Array.from(arguments);
return args.sort();
}
document.write(sortArg('x', 'y', 'z', '20', '66', '35','john', 'david'));
</script>
</body>
</html>
© Copyright 2017. All Rights Reserved.