网页设计之JavaScript
文章目录
- JavaScript笔记
- 一.JavaScript概述
- 1.JavaScript历史
- 2.javaScript与java的区别
- 3.javaScript的作用
- 4.JavaScript与html,css关系
- 二.基本语法
- 1.位置
- 2.变量
- 3.控制语句
- 三.函数，内置对象与事件
- 1.函数
- 基本语法：
- 全局函数：
- 2.内置对象
- （1）String字符串
- （2）Aarry数组
- （3）Date对象
- （4）Math对象
- 3.事件
- 四.Event对象
- 五.HTML Dom对象
- 1.获得标签的四种方式
- 2.HTML DOM - 改变 HTML内容
- 3.HTML DOM-改变 CSS
- 4.HTML DOM - 改变标签的属性
- 5.代码示例
- 6.一个小应用
- 7.除了id剩下三种HTMLdom对象的获取方法
- 8.批量处理为事件绑定函数【重要】
- 六.浏览器对象（BOM对象）
- 1.window对象
- 2.location对象
- 3.计时
JavaScript笔记
一.JavaScript概述
1.JavaScript历史
JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言， 结构简单，使用方便，对用户自身知识水
平的要求并不高，易学易懂。Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,
而且无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译Netscape公司见LiveScript大有发展前
途，而SUN公司( java)也觉得可以 利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改 为
JavaScript，造就了这个强力的WEB开发工具。
2.javaScript与java的区别
相同点：面相对象
不同点：JavaScript是脚本语言运行在浏览器，java是高级语言需要整体编译后而执行
3.javaScript的作用
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
具体作用：
1.响应网页中产生的事件（鼠标和键盘）
2.进行客户端表单验证
3.动态改变页面标签的样式
4.JavaScript与html,css关系
二.基本语法
1.位置
javaScript脚本写在一组script标签中，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title> <!-- javaScript的具体作用：1.响应网页中产生事件2.进行客户端表单验证3.动态改变标签样式--><!-- javaScript的位置：写在一组<script>标签中，此标签可以改在head或body中，一般习惯在head中，还可以将脚本写在外部额.js文件中，在html页面中导入外部的.js文件--><script type="text/javascript">alert("这是我的第一个JavaScript")</script><script src="js/demo.js" type="text/javascript" charset="utf-8"></script></head><body></body>
</html> 2.变量
声明变量：
声明变量用var关键字
例如 var name;
声明变量的同时对其赋值
var test=“THIS IS A BOOK
数据类型：
注意：1.字符串类型 “” ‘’ 都可以表示字符串类型
2.underfined类型：声明未初始化赋值的变量
3.Object类型：表示对象型
运算：
1.算术运算符
2.赋值运算
3.比较运算
4.逻辑运算符
5.条件运算符
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 变量// 1.声明变量 var（关键字） JavaScript是弱类型语言 java是强类型语言/* 数据类型：1.数值型（number）整数和浮点类型*/var a=10;var b=18.5;console.log(a+b); //28.5// 2.布尔型 true falsevar c=15;var d=17;console.log(c==d) //false// 3.字符串 "" '' 都可以表示var s='asdf';alert(typeof(s)); //测试传入参数类型console.log(typeof(s))// 4.underfined类型 声明未初始化赋值的变量var g;alert(g);// 5.Object类型 对象型var date=new Date();date.getDate(); date.getFullYear();date.getMonth();/* 算数运算符 + - * / % ==（递加） --（递减）比较运算符（值得注意的） ==（值相等） ===（值和类型都相等）逻辑运算符 注：值得注意的是字符串类型和数值类型的隐式转换*/</script></head><body></body>
</html>3.控制语句
控制语句：
三.函数，内置对象与事件
1.函数
基本语法：
定义函数：
function functionName([arguments]){ javascript statements [return expression] } /*function: 表示函数定义的关键字; functionName:表示函数名; arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空; statements: 表示实现函数功能的函数体; return expression:表示函数将返回expression的值，同样是可选的的语句。*/
调用函数：
<script type="text/javascript">function fun(){ alert(“test”); }fun();//函数名调用function fun2(){fun();//在其他函数中调用}</script>
全局函数：
• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。
• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的 数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
• typeof (arg)返回arg值的数据类型。
• eval(arg) 可运算某个字符串。
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var a="10";var b="10";// 声明函数function test(){console.log(a+b)}function test1(a,b,c){ //在functio中传入的参数不用指定类型传入的参数可以是任意类型 function不用值类型return a+b+c; }var d=test1(10,'11',12);alert(d);// 调用函数test()// 全局函数// Parseint() 把括号内的内容转换成整数后的值。如果括号内是字符串则字符串开头的数字部分被转换成为整// 数 如果是字母开头则返回 NaNconsole.log(parseInt(10.5)); //10console.log(parseInt(10)); //10console.log(parseInt('10a1')); //10console.log(parseInt('a10')); //NaN// typeof(变量) 返回变量的数据类型var d=10;var e="10";var f=true;console.log(typeof(d)); //numberconsole.log(typeof(e)); //stringconsole.log(typeof(f)); //boolean// eval(String) 可运算某个字符串 可以把一段字符串当做js脚本运行eval("alert(111)"); //直接弹出111</script></head><body></body>
</html>2.内置对象
（1）String字符串
属性： length 用法：返回该字符串的长度
方法：
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位 置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位 置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔 符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678
实例代码及注释：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 内置对象 String 字符串var s="abcdefg";console.log(s.length); //length() 属性：字符串长度console.log(s.charAt(1)); // chartAt(n) ：返回该字符串位于第n位的单个字符console.log(s.indexOf("b")); // 1 indexOf(char)：返回指定char首次出现的位置console.log(s.lastIndexOf("b")); //1 跟 indexOf() 相似，不过是从后边开始找.console.log(s.substring(1,3)); //bc substring(开始位置，结束位置) 如（1,3）返回的是1-2的值console.log(s.substr(1,3)); //bcd substr() 开始位置，截取的长度 如：1-3 返回的值1,2,3</script></head><body></body>
</html>（2）Aarry数组
数组创建方式（三种）：
var <数组名> = new Array();
var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);
var <数组名> = [<元素1>, <元素2>, <元素3>…];
**属性：**length ：数组的长度，即数组里有多少个元素。
方法：
concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)
pop() 用于删除并返回数组的最后一个元素。
push() 可向数组的末尾添加一个或多个元素，并返回新的长度。
shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。
slice() 可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并 不会修改数组
splice() 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。 splice(index(删除的位置),howmany(数量,为0不删除),item1,…,itemX(插入的元素))
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元 素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成： [3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。 对数字排序需要调用排序函数。
function sortNumber(a,b){
return a - b;
}
代码示例及注释：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//内置对象 array数组对象// 数组的创建 不用指定数组长度和类型// 数组创建方式 1var array=new Array(); array[0]=1; array[1]="2";array[3]=true;console.log(array); //[1,"2",empty,true]// 创建方式2// var aray =new Array(1,2,"3"，true);// 创建方式3// var array=[1,2,4,"11",15];console.log(array.length); // 4 数组属性 length() 数组的长度即数组有多少个元素var array2=[1,8];var array3=[5,9];console.log(array.concat(array2,array3)); //concat（）链接多个数组 不改变本来的数组console.log(array.pop()); //删除数组最后一个元素斌返回它console.log(array.push(0,0,0,0)); //向末尾添加n个元素， 并返回新的数组长度console.log(array.shift()); //删除第一个元素并返回它console.log(array.slice(1,3)); // 从数组中截取 slice(开始位置，结束位置)console.log(array.splice(1,3,1,1,1,1)); //splice(index(删除的位置),howmany(数量,为0不删除),item1,.....,itemX(插入的元素))console.log(array.join(":")); // join() 用指定的字符将数组中的每个元素连接为字符串console.log(array.reverse()); //逆转数组var array4=[2,5,8,9,13];// console.log(array4.sort()) 错误用法 怎么用？//需要定义一个排序函数然后将排序函数传入到sort()方式中function numberSort(a,b){return a-b;}console.log(array4.sort(numberSort)); //这样才是正确的用法</script></head><body></body>
</html>（3）Date对象
● 获取日期
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
● 设定日期
setDate() 设置 Date 对象中月的某一天 (1 ~ 31))
setMonth() 设置 Date 对象中月份 (0 ~ 11))
setYear() 设置
（4）Math对象
- Math 对象，提供对数据的数学计算。
属性：PI 返回π（3.1415926535…)。
方法：
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x) 对一个数进行下舍入。
Math.round(x) 把一个数四舍五入为最接近的整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值
3.事件
● 一些常用的事件:
onclick() 鼠标点击时；
ondblclick（） 鼠标双击时;
onblur() 标签失去焦点;
onfocus() 标签获得焦点;
onmouseover() 鼠标被移到某标签之上;
onmouseout （） 鼠标从某标签移开;
onload() 是在网页加载完毕后触发相应的的事件处理程序;
onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
Onkeydown 键盘按下
Onkeyup 键盘抬起
代码示例及注释：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function test(){console.log("事件触发了！")}</script></head><body onload="test()"><!-- 事件 --><!-- 1.onclick() 鼠标左键单击事件onclick事件 单击事件--><input type="button" name="" id="" value="点击" onclick="test()" /><!-- 2.ondblclick 鼠标左键双击事件 双击事件 --><input type="button" name="" id="" value="双击" ondblclick="test()" /><!-- 3.onfocus 输入框获得鼠标焦点触发事件 聚焦事件 --><input type="text" name="" id="" value="" onfocus="test()" /><!-- 4.onblur 输入框失去鼠标焦点事件 失焦事件--><input type="text" name="" id="" value="" onblur="test()" /><!-- 5.onmouseover 鼠标移入到标签上触发 移入事件--><div style="width: 500px; height: 400px; background-color: aqua;" onmouseover="test()"> </div><!-- 6.onmouseout 鼠标移出标签触发 移出事件 --><div style="width: 500px; height: 400px; background-color: aqua;" onmouseover="test()"> </div><!-- 7.onckeydown 键盘按下时触发 --><input type="button" name="" id="" value="" onkeydown="test()" /><input type="text" name="" id="" value="" onkeydown="test()" /><!-- 8.onkeydown 键盘抬起来触发 --><input type="button" name="" id="" value="" onkeyup="test()" /><input type="text" name="" id="" value="" onkeyup="test()" /><!--9.onload 当网页加载后自动触发 放在body标签中 --><!-- 10.onchange 当输入框失去鼠标焦点写且内容内容发生改变事件触发--><input type="text" name="" id="" value="" onchange="test()" /></body>
</html>四.Event对象
- Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置
如：
type 事件类型
Button 被点击的鼠标键位
altKey 按下altKey返回true
ctrlKey 按下ctrlKey返回true
shiftKey按下shiftKey返回true
keyCode 返回被按下的键位编码
offsetX 当前标签内的鼠标X轴
offsetY 当前标签内的鼠标Y轴
clientX 鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY 鼠标在显示器内的Y轴
代码及注释示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">/* Event对象 */function test(a,e){console.log(e)}</script></head><body><!-- 事件产生的同时，会创建一个event事件对象，此对象中可以包含时间的一些信息 --><input type="button" name="" id="" value="测试" onmousedown="test(1,event)" /><!-- 一些信息比如： event.button 鼠标标记位 0-左键 1-滚轮 2-右键event.type 事件的类型 --><div style="width: 200px; height: 500px; background-color: aquamarine;" onclick="test(1,event)" ></div><!-- e.offsetX+"------"+e.offsetY 获得鼠标在前亲标签中的坐标 --><!-- e.clientX+"------"+e.clientX 获得鼠标在浏览器中的坐标 --><!-- e.screenX+"------"+e.screenY 获得鼠标在显示器中的坐标 --><input type="text" name="" id="" value="" onkeydown="test(1,event)" /><!-- e.keyCode 获得按键的是Askall码值 --><!-- e.ctrlKey 当按下键盘上键是ctrl则返回true如果不是则返回falsee.AltKey 同上e.shiftKey 同上--></body>
</html>五.HTML Dom对象
DOM是Document Object Model文档对象（网页中的标签）模型的缩写.通过html dom，可用javaScript操作html文档的所有标签
js要对网页网页中的标签进行操作那么js认为网页中的每个标签都是一个对象**（dom对象）**操作网页就可以认为是操作对象
那么我们要在js中的标签进行操作，首先要获得网页中的标签（要操作，先获得）
如何获得网页中的标签？
- document对象：表示整个html文档，当浏览器加载网页时会创建个document对象
1.获得标签的四种方式
（1）通过 id 找到 HTML 标签 document.getElementById(“id");
（2）通过标签名找到 HTML 标签 document.getElementsByTagName(“p”);
（3）通过类名找到 HTML 标签 document.getElementsByClassName(“p”);
（4）通过name找到 HTML 标签 document.getElementsByName(“name");
2.HTML DOM - 改变 HTML内容
Html dom允许javaScript 改变html标签的内容。
改变 HTML 标签的属性
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(“username").value=“new value"; document.getElementById("image").src=“new.jpg"; document.getElementById(“div”).innerHTML=new HTML；3.HTML DOM-改变 CSS
html dom允许 javaScript改变html标签的样式。
语法：
document.getElementById(“id”).style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
4.HTML DOM - 改变标签的属性
html dom允许 javaScript改变html标签的属性。
5.代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- Dom 是Documeent Object Model 文档对象（网页中的标签）模型的缩写js要对网页中的标签进行操作，那么js认为网页中的每个标签都是一个队形（dom对象）操作网页就可以认为是操作对象那么我们要在js中的标签中进行操作，首相要获得网页中的标签（要操作，先得到）如何获得网页中的标签？document对象表示整个html文档，当浏览器记载网页时，会创建个document对象如：通过id获得对象 document.getElementById（"id"）； 返回对应id的标签对象--><script type="text/javascript">function oper1(){ //操作一：对标签中的内容进行操作var div1Obj=document.getElementById("div1");var div2Obj=document.getElementById("div2");div2Obj.innerHTML=div1Obj.innerHTML; //将id="div1"的标签的内容赋给id="div2标签}function oper2(){ //操作二：操作标签的cssvar div1Obj=document.getElementById("div1");var div2Obj=document.getElementById("div2");// div2Obj.style.display="none"; //将id="div2"的标签隐藏// div1Obj.style.backgroundColor="red"; //将id="div1"的标签的背景颜色变为红色div2Obj.style.width="200px"; //将id="div2"的标签的宽度改为200px}function oper3(){ //操作三：操作标签属性var text1Obj=document.getElementById("text1");var text2Obj=document.getElementById("text2");// text2Obj.value=text1Obj.value; 将id="text1"的标签的value属性赋给id="text1"的标签// text1Obj.value=""; 将id="text2"的标签的value属性赋值为""text1Obj.type="button"; //将id="text1"的标签的type属性赋值为"button"}</script><div id="div1">div1</div><div id="div2"></div><input type="button" name="" id="" value="测试1" onclick="oper1()" /><!-- 点击按钮将id="div1"的标签的内容赋给id="div2标签 --><input type="button" name="" id="" value="测试2" onclick="oper2()" /><!-- 点击按钮将做出oper2（）方法中的对CSS属性做出的改变--><input type="text" name="" id="text1" value="" /><input type="text" name="" id="text2" value="" /><input type="button" name="" id="" value="测试3" onclick="oper3()" /></body>
</html>6.一个小应用
描述：
页面中有三个按钮分别写有颜色： 红色 绿色 蓝色。点击相应的按钮页面变换相应的颜色
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function text(c){var bodyObj=document.getElementById("body1");bodyObj.style.backgroundColor=c;}</script></head><body id="body1"><input type="button" name="" id="" value="红色" onclick="text('red')" /><input type="button" name="" id="" value="绿色" onclick="text('green')" /><input type="button" name="" id="" value="蓝色" onclick="text('blue')" /></body>
</html>效果：
7.除了id剩下三种HTMLdom对象的获取方法
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function test(){//根据标签名获取指定名称的标签对象, 得到的是一个集合, 哪怕满足条件的只有一个//var objs = document.getElementsByTagName("input");//var objs = document.getElementsByClassName("h");var objs = document.getElementsByName("c");for (var i = 0; i < objs.length; i++) {objs[i].checked = true;}} window.onload=function(){var objs1 = document.getElementsByClassName("c1");for (var i = 0; i < objs1.length; i++) {objs1[i].onclick = function(){alert(this.value); //批量为多个标签的事件绑定处理函数}}}</script></head><body><input type="checkbox" value="1" class="h" name="c"/><input type="checkbox" value="2" class="h" name="c"/><input type="checkbox" value="3" class="h" name="c"/><input type="checkbox" value="4" class="h" name="c"/><input type="button" value="全选" id="btn1" onclick="test()"/><input type="button" value="1" class="c1"/><input type="button" value="2" class="c1"/><input type="button" value="3" class="c1"/></body>
</html>效果：
8.批量处理为事件绑定函数【重要】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">/* function test(){} *///匿名函数window.onload=function(){ //在js中为onload事件 绑定一个处理函数var btn1 = document.getElementById("btn1");//在js代码为标签事件绑定处理函数,将js函数从html中分离出来btn1.onclick = function(){alert(111);}}</script></head><body><!-- <input type="button" οnclick="test()" /> --><input type="button" value="保存" id="btn1"/></body>
</html>六.浏览器对象（BOM对象）
1.window对象
代码示例：
父：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function Open(e){var x=e.screenX; //鼠标在屏幕上的位置横坐标var y=e.screenY; //鼠标在屏幕上的位置纵坐标window.open("window-子.html","窗口","width=400 height=500 left="+x+" top="+y);} function show(msg){var fatherdiv = document.getElementById("father_div");fatherdiv.innerHTML = msg; }</script></head><body>父<div id="father_div"></div><iframe src="window-子.html" width="500px" height="500px" name="child"></iframe><input type="button" name="" id="newWindow" value="打开新窗口" onclick="Open(event)" /><a href="window-父.html" target="_top">内联样式</a> <!-- 这里的target是可以指向内联框架在内联框架中打开指定路径的的网页前提是得给内联框架设置名字（name属性）然后让target指向它--></body>
</html>子：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function showfather(){/* var fatherObj=window.parent.document.getElementById("father_div"); //子类调用父类第一种方法var chlidTextObj=document.getElementById("text_id"); //直接将父类对象取过来fatherObj.innerHTML=chlidTextObj.value;*/var msg=document.getElementById("text_id").value; //子类调用父类第二种方法：直接调用父类的方法（通过传参）window.parent.show(msg); //在子窗口中调用父方法}</script></head><body>文本框：<input type="text" name="" id="text_id" value="" /><input type="button" name="" id="" value="发送" onclick="showfather()"/></body>
</html>效果：
2.location对象
代码示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//1.重新设置新地址，重定向// location.href="window-子.html";function assaginDemo(){location.assign("window-子.html");// 2.加载新页面，保留原文档（页面）}function reloadDemo(){location.reload();// 3.重新加载当前文档}function replaceDemo(){location.replace("window-父.html");// 4.用一个新文档取代当前文档，加载新页面替换当前页面,不保留原页面}</script></head><body><div></div><input type="button" name="" id="" value="assagin" onclick="assaginDemo()" /><input type="button" name="" id="" value="reload" onclick="reloadDemo()"/><input type="button" name="" id="" value="replace" onclick="replaceDemo()" /></body>
</html>效果：
3.计时
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function test(){alert("弹出");}//在指定的时间后，调用指定的函数，只调用一次// var t = setTimeout("test()",5000);//每隔相同的时间调用指定的函数var t=setInterval("test()",3000);function clearTime(){// clearTimeout(t); 清除计时器clearInterval(t); //清除计时器}</script></head><body><input type="button" name="" id="" value="清除计时器" onclick="clearTime()"/></body>
</html>效果：
网页设计之JavaScript相关推荐
- 响应式网页设计之JavaScript基础
JavaScript 一.认识JavaScript 1.什么是JavaScript? 2.JavaScript的组成? 3.JavaScript用来做些什么? 2.JavaScript与java有什么 ...
- JavaScript交互式网页设计————1.JavaScript的基本语法
学习目标 1.JavaScript脚本的代码位置 2.JavaScript的核心语法 3.JavaScrip的流程控制语句----顺序结构和选择结构 4.JavaScrip的流程控制语句----循环结 ...
- 响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互 补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
- php网页设计课程设计dreamweaver8_《动态网页制作》(PHP)课程标准
-1- <动态网页制作> ( PHP )课程标准 课程代码 010******* 课程类别 专业课程 课程类型 考试课 课程性质 必修课 课程学分 5 课程学时 80 修读学期 第 3 学 ...
- html+css+javascript 网页设计 从入门到精通_绵阳美工设计学习
导语概要 网页设计培训系统学习四大软件,让你掌握8大电商美工核心技能快速咨询网页设计(webdesign,又称为WebUIdesign,WUIdesign,WUI),是根据企业希望向浏览者传递的信息( ...
- 张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例 图3-1 网站div结构布局示意图 3.2界 ...
- javascript网页特效_南通建网站哪些,网页设计维护
无锡邦程信息科技有限公司为您详细解读rKXvd南通建网站哪些的相关知识与详情,#末网页设想师根据差别站点的内容微风格,设想出完美的网页效果图.内容填充:不论是个人网站还是企业网站,都必需从内容那个动身 ...
- 韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
最新文章
- SAP中的BOPF（Business Object Processing Framework）
- IntelliJ IDEA注册码
- 微信小程序 openid及支付的若干问题解决方案
- Linux 用户组相关命令
- 测试硬盘读写速度软件_机械硬盘回春：2023年容量破40TB 读写速度媲美SATA SSD
- 【翻译】GitHub Pages Basics 基本使用帮助【一】GitHub Pages 是什么？
- MariaDB 双主复制的配置
- .net 窗体清除上次显示的内容_access在系统右下角任务栏弹出消息提示窗体
- 使用java实现打印功能_java实现打印功能有没有比较好的方式？
- 苹果或将推出可折叠iPad：支持5G 对抗双屏Surface
- mybatis mysql merge_Spring Boot + Mybatis 整合Mysql ，SQLServer数据源以及整合druid，动态调整数据源切换。...
- SPOJ104 Highways，跨越数
- 3.0 Android组件之间的信使Intent
- 正在修复磁盘怎么取消
- Linux命令之shutdown
- kvaser 驱动修复(linux)
- npm i 安装依赖 报错 npm ERR! code EINTEGRITY npm ERR! sha512-*****==.(12008 bytes) 问题处理
- BAT实现文件下载功能
- Zookeeper的Centos集群搭建
- 如何设计一个高并发的存储系统