The analysis of calendar (two ways)

About calendar wording,

The first step in our understanding of the operation of non-built-in and built-in attribute nodes, divided into visible and invisible, visible is that we can clearly see the console open, invisible is that we can not open the console open but this element does have the attributes and attribute values, we can see the console console.log return property values; Here's the calendar, for example, non-built-visible and invisible are two ways to write calendar

A non-invasive method to manipulate visible attribute nodes (setAttribute / getAttrubute); setAttribute should be noted that a property both set gave this property adds an attribute value, but only obtained getAttrubute property value;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }

</style>
</head>
<body>
<div id="tab" class="calendar">
<ul id="box">
<li class="active"><h2>1</h2><p>JAN</p></li>
<li ><h2>2</h2><p>FER</p></li>
<li ><h2>3</h2><p>MAR</p></li>
<li ><h2>4</h2><p>APR</p></li>
<li ><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<Li> <H2>. 7 </ H2> <P> JUL </ P> </ Li>
<Li> <H2>. 8 </ H2> <P> the AUG </ P> </ Li>
<Li> < H2>. 9 </ H2> <P> the SEP </ P> </ Li>
<Li> <H2> 10 </ H2> <P> the OCT </ P> </ Li>
<Li> <H2>. 11 < / H2> <P> NOV </ P> </ Li>
<Li> <H2> 12 is </ H2> <P> DEC </ P> </ Li>
</ UL>
<div class = "text" ID = "TXT">
<h2> January Events </ h2>
<the p-> New Year approached, we can discuss where to go and play ~ </ the p->
</ div>
</ div>
</ body>
<Script of the type = "text / JavaScript">
var arr = [ 'New Year approached, we can discuss where to play ~',
'we learn it ~ ~ ~ 222222'
'We learn it ~ ~ ~ 222 222 333',
'222 444 222 ~ ~ ~ we learn it,'
'we learn ~ ~ ~ 555 bar 222222',
'we learn it ~ ~ ~ 666,222,222',
'we learn it 227 772 222 ~ ~ ~ ',
' we learn it 28,888,822,222 ~ ~ ~ ',
' we learn it 99,999,222,222 ~ ~ ~ '
'We learn 10 million of it ~ ~ ~ 222222',
'we learn it ~ ~ ~ 111 111 222 222',
'we learn it ~ ~ ~ 22222200000000000']

var = document.querySelectorAll oli ( "li # Box")
var OP = document.querySelector ( "P # TXT")
var = OH2 document.querySelector ( "# TXT H2")
for (I = 0; I <oli.length; I ++) {
OLI [I] .setAttribute ( "AA", I ) here uses a method of adding a non-built-visible attributes and attribute values, the main meaning of this code is to add a non-built-li visible attribute aa, aa and the value equal to the value of i, the outer circle, corresponding to li are set to each attribute and a sequentially ordered aa
OLI [I] .onclick = function () {
for (J = 0; J <oli.length; J ++) {
OLI [J] .className = "";
= this.className "Active"
}
var index = this.getAttribute ( "AA") we set up in front of attributes and attribute values, the attribute value to be obtained here we attribute this binding element pointed our by getAttibute
OP.ARR = the innerHTML [index]
oh2.innerHTML = (index +. 1) + "Month"
}
}

</script>
</html>

Writing a second non-built-in attributes and attribute values are not visible to the operating elements

for (I = 0; I <oli.length; I ++) {
OLI [I] = I II.A;
// custom invisible attributes a, while the assignment I
the console.log (OLI [I] II.A)
OLI [I ] .onclick = function () {
for (J = 0; J <oli.length; J ++) {
OLI [J] .className = "";
this.className = "Active"
}

op.innerHTML = ARR [this.a ]
// get a custom attribute is set to a value
oh2.innerHTML = (this.a + 1) + " month"
}
}

</script>
</html>

The analysis of calendar (two ways)

About calendar wording,

Guess you like