标签：table cas 相等 mic javascrip 时钟 个数 循环 延迟
JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：
JavaScript 的这三个组成部分，在当前五个主要浏览器（IE、Firefox、Chrome、Safari 和 Opera）中
都得到了不同程度的支持。其中，所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错，而对
ECMAScript 5 的支持程度越来越高，但对 DOM 的支持则彼此相差比较多。对已经正式纳入 HTML5 标
准的 BOM来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。
把 JavaScript 插入到 HTML 页面中要使用 <script> 元素。使用这个元素可以把 JavaScript 嵌入到
HTML页面中，让脚本与标记混合在一起；也可以包含外部的 JavaScript文件。而我们需要注意的地方有：
内部定义：
<script type="text/javascript"> window.onload = function(){ document.write("<h1>HelloWorld</h1>"); //alert("HelloWorld"); } </script>
/** * JavaScript属于弱数据类型的语言,声明变量的时候不需要声明数据类型，也可以不用赋初始值 * ;可以省略 * 严格区分大小写 * 数据类型 * 数值型：number * 字符型：string * 布尔型：boolean * 未定义：undefined * 对象型：object */
//parseInt();用于将字符串转换为整型数字,会自动去掉小数点之后的值 var par = parseInt(str); //parseFloat();用于将字符型转为浮点型 var par1 = parseFloat(str); //isNaN();用于检查参数是否是一个非数字,如果是数字就返回false //alert(isNaN(111)); //setInterval();每隔一段时间执行一次 setInterval(function() { document.write("hello" + "<br />"); }, 1000); //setTimeout();隔一段时间之后再开始执行一次,执行完就结束 setTimeout(function() { document.write("hello000000" + "<br />"); }, 2000);
//求0--num之间的和,在定义参数时不需要声明数据类型， function fun02(num1,num2){} //调用函数时实际出入的参数与函数本身的参数个数、类型没关系，控制台不会报错
---window对象--- //获取浏览器的宽高，并赋值 var width = window.screen.width; var height = window.screen.height; //打开窗口 var win; function openW(){ win = window.open(); } //获取键盘码事件 e.keyCode
---时钟特效--- //获取系统的时间 var time = new Date(); //获取年份。。。。。。。 var year = time.getFullYear(); var month = time.getMonth()+1; var day = time.getDate(); var week = time.getDay(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); //在HTML中添加内容 innerHTML
| 方法 | 描述 |
| back() | 加载 history 列表中的前一个 URL。 |
|
forward() |
加载 history 列表中的下一个 URL。 |
| go() | 加载 history 列表中的某个具体页面。 |
<!-- 历史中的后一个 --> <a href="#" onclick="javascript:history.back()">后退</a> <!-- 历史中的前一个 --> <a href="#" onclick="javascript:history.forward()">前进</a>
//通过ID获取DOM对象 document.getElementById(id值) var obj = document.getElementById("test"); //给获得的对象obj绑定一个单击事件 obj.onclick = function(){ //innerHTML获取到对象中的所有内容 alert(obj.innerHTML); //innerText只获得文本 } //通过标签名获取DOM对象数组 var objlis = document.getElementsByTagName("li"); //alert(objlis.length); //通过class属性获取 var objli_class = document.getElementsByClassName("test"); //通过name属性获取 getElementsByName("name值"); var obj_name = document.getElementsByName("name")
//通过标签名获取h1 var h1s = document.getElementsByTagName("h1"); h1s[0].innerText = "第一个h1标签中的内容";
//向对象中添加内容
obj.innerText = obj.textContent + "我从来也不骑";
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>树形菜单</title> <script src="../js/树形菜单.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="../css/树形菜单.css"/> </head> <body> <ul> <li id="lm01" class="lm"> <h3>栏目1</h3> <div class="nr"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </li> <li id="lm02" class="lm"> <h3>栏目2</h3> <div class="nr"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </div> </li> <li id="lm03" class="lm"> <h3>栏目3</h3> <div class="nr"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </div> </li> <li id="lm01" class="lm"> <h3>栏目4</h3> <div class="nr"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </li> <li id="lm02" class="lm"> <h3>栏目5</h3> <div class="nr"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </div> </li> <li id="lm03" class="lm"> <h3>栏目6</h3> <div class="nr"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </div> </li> <li id="lm01" class="lm"> <h3>栏目7</h3> <div class="nr"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </li> <li id="lm02" class="lm"> <h3>栏目8</h3> <div class="nr"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </div> </li> <li id="lm03" class="lm"> <h3>栏目9</h3> <div class="nr"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </div> </li> </ul> </body> </html>
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
width: 300px;
text-align: center;
color: red;
/* 背景渐变色 */
background-image: linear-gradient(90deg, pink, aqua);
}
p {
color: #FFFFFF;
}
h3 {
//鼠标手势变为手型
cursor: pointer;
}
.nr {
display: none;
}
window.onload = test02; /*第二种方式*/ function test02() { //1、获取所有栏目 var lms = document.getElementsByClassName("lm"); //2、给所有的栏目绑定单击事件 for (var i = 0; i < lms.length; i++) { //bind(i); bindfor(i); } } /*其他收回*/ function bindfor(index) { //获取所有栏目 var lms = document.getElementsByClassName("lm"); var nrs = document.getElementsByClassName("nr"); //给栏目绑定单击事件 lms[index].onclick = function(){ for (var j = 0;j < nrs.length;j ++) { if (index == j) { if (nrs[index].style.display != "block") { nrs[index].style.display = "block"; } else{ nrs[j].style.display = "none"; } } else{ nrs[j].style.display = "none"; } } } } function bind(index) { //获取所有栏目 var lms = document.getElementsByClassName("lm"); lms[index].onclick = function() { //alert(index); var nrs = document.getElementsByClassName("nr"); if (nrs[index].style.display != "block") { nrs[index].style.display = "block"; } else { nrs[index].style.display = "none"; } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/tab切换.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="../css/tab切换.css" /> </head> <body> <div id="con"> <div id="top"> <div class="btn"> 按钮1 </div> <div class="btn"> 按钮2 </div> <div class="btn"> 按钮3 </div> </div> <div id="bottom"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> </div> </body> </html>
*{
margin: 0px;
padding: 0px;
}
#con{
width: 600px;
height: 400px;
margin: auto;
border: 1px solid red;
}
#top div{
height: 100px;
width: 198px;
border: 1px solid yellow;
text-align: center;
line-height: 100px;
background-color: pink;
float: left;
cursor:pointer;
}
#bottom{
clear: both;
}
#bottom div{
height: 298px;
background: aquamarine;
color: red;
font-size: 66px;
text-align: center;
line-height: 298px;
}
#bottom div:nth-child(2){
display: none;
}
#bottom div:nth-child(3){
display: none;
}
//当窗口加载完成时执行函数 window.onload = test02; function test02() { //1、获取按钮 var btns = document.getElementsByClassName("btn"); //2、遍历按钮 for (var i = 0; i < btns.length; i++) { //调用方法并将i传递给方法 change(i); } } function change(index) { //1、获取按钮 var btns = document.getElementsByClassName("btn"); //2、 获取内容 var cons = document.getElementsByClassName("content"); //为每个按钮添加点击事件 btns[index].onclick = function() { //遍历按钮的个数 for (var j = 0; j < btns.length; j++) { //如果点击的按钮相等 if (index == j) { //内容显示出来，按钮颜色变红色 cons[index].style.display = "block"; this.style.backgroundColor = "red"; } else { //如果不想等，内容不显示，按钮颜色不变化 cons[j].style.display = "none"; btns[j].style.backgroundColor = "pink"; } } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/全选反选.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input type="checkbox" id="all" />全选 <input type="checkbox" id="fan" />反选 <br/><br/> <input type="checkbox" name="hob" />吃 <input type="checkbox" name="hob" />喝 <input type="checkbox" name="hob" />玩 <input type="checkbox" name="hob" />了 <input type="checkbox" name="hob" />学习 <input type="checkbox" name="hob" />电影 <input type="checkbox" name="hob" />音乐 <input type="checkbox" name="hob" />运动 <input type="checkbox" name="hob" />阅读 <input type="checkbox" name="hob" />睡觉 </body> </html>
window.onload = function(){ //获取全选按钮 var all = document.getElementById("all"); //获取反选按钮 var fan = document.getElementById("fan"); //获取爱好 var hobs = document.getElementsByName("hob"); //给全选按钮绑定单机时间 all.onclick = function(){ var f = this.checked; for (var i = 0;i <hobs.length;i ++) { //让爱好的选中状态和全选按钮一致 hobs[i].checked = this.checked; } } //给全选按钮绑定单机时间 fan.onclick = function(){ for (var i = 0;i <hobs.length;i ++) { //让爱好的选中状态和反选按钮一致 //！取反，与选中的对象相反 hobs[i].checked = !hobs[i].checked; } } }
标签：table cas 相等 mic javascrip 时钟 个数 循环 延迟
原文地址：https://www.cnblogs.com/zhangzimuzjq/p/11848046.html
