注意：

1、JS在HTML中从上到下依次执行，所以获取元素的结果与JS的位置有关

<!DOCTYPE html>

<html>

<head>

<title>获取元素</title>

//外部JS警告框弹出的是【null】

<script type="text/javascript" src="js/index.js"></script>

//警告框弹出的是【null】

<script type="text/javascript">

alert(document.getElementById("my"));

</script>

</head>

<body>

<div id="my">haha</div>

//警告框弹出的是【object HTMLDivElement】

<script type="text/javascript">

alert(document.getElementById("my"));

</script>

</body>

</html>

注：解决方法（1）将JS放到网页文档末尾（2）使用window.onload=initi;当文档加载完成时再运行JS的函数initi【此时函数使用时只用函数名，不要小括号】。

JS完成特效

1、 时钟特效

window.onload=initi; //给文档加载完成事件绑定名叫initi的函数

function initi(){

setInterval("getTime()",10); //每隔1000毫秒执行一次getTime()函数

}

function getTime(){

//1.获取元素

var timeDiv=document.getElementById("my");

//2.累加时间

var today=new Date(); //定义时间对象

var tStr=""; //定义时间字符串

tStr+=today.getFullYear()+"年";

tStr+=(today.getMonth()+1)+"月";

tStr+=today.getDate()+"日";

tStr+=today.getHours()+"时";

tStr+=today.getMinutes()+"分";

tStr+=today.getSeconds()+"秒";

//3.修改元素

timeDiv.innerHTML=tStr; //将时间字符串丢到Div中

}

2、弹出窗口特效——病毒页面效果——每隔5s跳出页面

function opens(){

window.open("https://123.sogou.com/","","  width=250, height=265,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");

}

var t=setInterval("opens()",5000);

1、 Tab切换——使用数组和循环完成Tab切换

// JavaScript Document

//定义三个按钮

var btns=new Array();

//定义三个内容

var contents=new Array();

//文档加载完成做事情

window.onload=function(){

//取出所有div

var divs=document.getElementsByTagName("div");

var i=0;//按钮的下标

var j=0;//内容的下标，下标从0开始

for(var k=0;k<divs.length;k++){

//根据div块的className将不同的div存入相应的数组中

if(divs[k].className=="btnTab"){

//如果class的值和按钮的class一致就存入

btns[i]=divs[k];

i++;//让下标连续

/*

两句可以写作

btns[i++]=divs[ks];

*/

}

if(divs[k].className=="contentTab"){

//如果class的值和按钮的class一致就存入

contents[j]=divs[k];

j++;//让下标连续

}

}

for(var t=0;t<btns.length;t++){

bangd(t);//循环每个按钮，绑定函数

}

//使用循环进行事件绑定

function bangd(temp){

//给第i个按钮绑定单击事件

btns[temp].onclick=function(){

for(var m=0;m<contents.length;m++){

if(m==temp){

contents[m].style.display="block";

}else{

contents[i].style.display="none";

}

}

}

}

}

2、 全选和反选

a) 全选

//文档加载完成时，绑定匿名函数

window.onload=function(){

//通过id获取全选复选框

var checkAll=document.getElementById("checkAll");

//根据name取复选框，返回对象数组

var hobby=document.getElementsByName("hobby");

//给全选按钮绑定单击事件，事件是一个匿名函数，函数可以嵌套

checkAll.onclick=function(){

//this关键字，指的是当前正在运行时的对象

/*

if(this.checked==true){//全选被选中

for(var i=0;i<hobby.length;i++){

//使用循环选中所有按钮

hobby[i].checked==true;

}

}else{//否则，所有按钮都不被选中

for(var i=0;i<hobby.length;i++){

hobby[i].checked==false;

}

}

*/

//优化代码【this指的是全选复选框，给所有爱好赋上全选框的值】

for(var i=0;i<hobby.length;i++){

hobby[i].checked==this.checked;

}

}

}

b) 反选

//文档加载完成时，绑定匿名函数

window.onload=function(){

//通过id获取全选复选框

var checkFan=document.getElementById("checkFan");

//根据name取复选框，返回对象数组

var hobby=document.getElementsByName("hobby");

//给反选按钮绑定单击事件，事件是一个匿名函数，函数可以嵌套

checkFan.onclick=function(){

for(var i=0;i<hobby.length;i++){

hobby[i].checked=!hobby[i].checked;

//循环每一个复选框，值为自己的相反值

}

}

}

3、 表格的增删改查

…………………………………未完待续，我先睡了有时间再发………………………

第五章 JS典型特效的更多相关文章

  1. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  2. 读JS高级——第五章-引用类型 _记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  4. JS复习第五章

    第五章 引用类型 一.Object类型 创建object实例的方式有两种. 第一种是使用new操作符后跟object构造函数,如下所示: ver person = new Object( ) ; pe ...

  5. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  6. 精通Web Analytics 2.0 （7） 第五章：荣耀之钥：度量成功

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第五章:荣耀之钥:度量成功 我们的分析师常常得不到我们应得的喜欢,尊重和资金,因为我们没有充分地衡量一个黄金概念:成果.因为我们 ...

  7. 读《编写可维护的JavaScript》第五章总结

    第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...

  8. Google V8编程详解（五）JS调用C++

    http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...

  9. 《学习OpenCV》练习题第五章第一题ab

    这道题是载入一幅带有有趣纹理的图像并用不同的模板(窗口,核)大小做高斯模糊(高斯平滑),然后比较用5*5大小的窗口平滑图像两次和用11*11大小的窗口平滑图像一次是否接近相同. 先说下我的做法,a部分 ...

随机推荐

  1. SQL Server CTE 递归查询全解

    在TSQL脚本中,也能实现递归查询,SQL Server提供CTE(Common Table Expression),只需要编写少量的代码,就能实现递归查询,本文详细介绍CTE递归调用的特性和使用示例 ...

  2. MTK 关闭耳机调至最大音量时，提示损伤听力

    android开发之耳机调至最大音量时,提示损伤听力 android开发之耳机调至最大音量时,提示损伤听力 通过提示语,我们可以查出,只要的逻辑代码是在framework/base/packages/ ...

  3. datatable to List<T>带缓存

    public class DataHelper { //datarow 转换的类型缓存 private static MemoryCache modelCash = MemoryCache.Defau ...

  4. mysql的某个数据库拒绝访问的问题

    场景: mysql自带的mysql和test库都可以正常连接. 新建一个数据库demo,配置java访问时报错:Access denied for user 'root'@'localhost' (u ...

  5. vs2010下release版本调试设置

    设置在Release模式下调试的方法: 1.工程项目上右键 -> 属性 2.c++ -> 常规 -〉调试信息格式 选 程序数据库(/Zi)或(/ZI), 注意:如果是库的话,只能(Zi) ...

  6. How not to alienate your reviewers, aka writing a decent rebuttal?

    [forwarded from https://nebelwelt.net/blog/20180704-rebuttal.html] Assuming you have given everythin ...

  7. 【Zookeeper系列】构建ZooKeeper应用（转）

    原文地址:https://www.cnblogs.com/sunddenly/p/4064992.html 一.配置服务 配置服务是分布式应用所需要的基本服务之一,它使集群中的机器可以共享配置信息中那 ...

  8. C#简单三层结构设计UI、BLL、DAL、Model实际项目应用例子

    C#简单三层结构设计UI.BLL.DAL .Model实际项目应用例子 在实际项目中,程序设计都有他的层次结构,比如MVC.MVP.普通的三层结构等等,不过现在用三层结构的相比可能少了,但是也有一些小 ...

  9. AS 常用快捷键

    上篇中我们讲了Android Studio如何添加插件,这篇我们讲讲AS的快捷键,这里我说明的快捷键都是最最实用的,希望刚刚加入AS的朋友尽快的熟悉一下这几个快捷键,这样可以帮助你提高coding的效 ...

  10. 1.13flask完结

    2019-1-13 14:16:26 终于完结flask,开始爬虫啦!!!! 还有 一些爬虫视频没看完,余下的就一点啦! 老师整理了flask的总结!和一些组件的使用! 打算重装一下电脑,边看视频,边 ...