Home > Developer > Web Develop
Clock:
<p id= "Timetxt" ></p>//The time to be acquired is shown in Timetxt.
<button onclick= "StartTime ()" > Close </button>
<!--clock--
function StartTime () {//create startTime () functions
var today=new Date ();Defining an object today hosts the current time
var h=today.getHours (); Get to TIME
var m=today.getminutes ();Get points
var s=today.getseconds (); Get seconds
M=checktime (m);
S=checktime (s);
document.getElementById ("Timetxt"). innerhtml=h+ ":" +m+ ":" +s;
T=settimeout (function () {
StartTime ();
},1000);//re-fetch the current time every 1s
}
function Checktime (i) {//Determine if the current number of minutes and seconds is less than 10
if (i<10) {
i= "0" +i; When it's less than 10, add 0 to the front.
}
return i; Otherwise direct return I
}
</script>
Carousel Diagram:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Native JS Implementation Carousel Map </title>
<style type= "Text/css" >
div,ul,body{margin:0;padding:0;}
Ul,li{list-style:none;list-style-type:none;}
#box {
position:relative;
font-size:12px;
font-family: "Arial";
width:482px;
height:322px;
border:8px solid #FF9900;
border-radius:10px;
margin:20px Auto;
}
. imglist{
width:480px;
height:320px;
border:1px solid #000;
position:relative;
Overflow:hidden;
}
. imglist li{
width:480px;
height:320px;
Position:absolute;
left:0;
top:0;
opacity:0;
Transition:opacity 0.8s linear;
Cursor:pointer;
}
. Imglist Li.current{opacity:1;}
. imglist Li Img{
Display:block;
width:480px;
height:320px;
}
. countlist{
Position:absolute;
right:10px;
bottom:5px;
Clear:both;
}
. countlist li{
Float:left;
margin:0 5px;
width:20px;
height:20px;
line-height:20px;
Text-align:center;
background:palevioletred;
border-radius:100%;
border-radius:10px;
opacity:0.8;
Cursor:pointer;
}
. countlist li.active,.countlist Li:hover{background:brown;color: #fff;}
</style>
<body>
<div id= "box" >
<ul class= "Imglist" >
<li class= "Current" ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class= "Countlist" >
<li class= "Active" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type= "Text/javascript" >
var Box=document.getelementbyid ("box");
var uls=box.getelementsbytagname ("ul");
var imglist=uls[0].getelementsbytagname ("Li");
var btnlist=uls[1].getelementsbytagname ("Li");
var i=index=0;
var play=null;
Console.log (box,uls,imglist,btnlist);
Function Show (a) {
for (i=0;iimglist[i].style.opacity=0;
Imglist[a].style.opacity=1;
}
for (i=0;i<btnlist.length;i++) {
Btnlist[i].classname= "";
Btnlist[a].classname= "Active";
}
}
for (i=0;i<btnlist.length;i++) {
Btnlist[i].index=i;
Btnlist[i].onmouseover=function () {
Show (This.index);
Clearinterval (play);
}
}
function AutoPlay () {
Play=setinterval (function () {
index++;
index>=imglist.length&& (index=0); If index>=imglist.length, then index=0;
"Similar to the logical AND operation in Java, the logical AND operation in ECMAScript is also a simple operation,
That is, if the first operand determines the result, the second operand is no longer counted. For logical AND operations,
If the first operand is false, the result cannot be equal to true regardless of the value of the second operand. "
Show (index);
},3000);
}
AutoPlay ();
Box.onmouseover=function () {
Clearinterval (play);
};
Box.onmouseout=function () {
AutoPlay ();
}
</script>
</body>
Tab: (The style is ugly, I am too lazy to change)
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>tab Tab </title>
<script type= "Text/javascript" >
Window.onload=function () {
var c=0;
var Tablist=document.getelementbyid ("Tablist");
var a1=tablist.getelementsbytagname ("a");
var List=document.getelementbyid ("list");
var listul=list.getelementsbytagname ("ul");
for (Var j=0;j<a1.length;j++) {
A1[j].m=j;
A1[j].onclick=function () {
C=j;
for (Var k=0;k<a1.length;k++) {
A1[k].classname= "";
Listul[k].style.display= "None";
}
This.classname= "Active";
listul[this.m].style.display= "Block";
}
}
}
</script>
<style type= "Text/css" >
a{text-decoration:none;font-size:14px;}
. active{background:red;}
</style>
<body>
<div id= "Tablist" >
<a href= "#" class= "active" >111111</a>
<a href= "#" >222222</a>
<a href= "#" >333333</a>
</div>
<div id= "List" >
<ul>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
<li>111111111</li>
</ul>
<ul style= "Display:none;" >
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
</ul>
<ul style= "Display:none;" >
<li>333333333</li>
<li>333333333</li>
<li>333333333</li>
<li>333333333</li>
<li>333333333</li>
</ul>
</div>
</body>
Native JS Implementation of 3 small effects (clock, Carousel Diagram, TAB)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
