版权声明：本文为博主原创文章，转载请标明出处。https://blog.csdn.net/kXYOnA63Ag9zqtXx0/article/details/82954503 https://blog.csdn.net/forever428/article/details/83240799
文章目录
HTML/CSS/JavaScript
HTML
Html HyperText Markup Language内容
- Html就是超文本标记语言的简写，是最基础的网页语言。
- Html是通过标签来定义的语言，代码都是由标签所组成。
- Html代码不用区分大小写。
- Html代码由开始结束。里面由头部分和体部分两部分组成。
- 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
- 体部分是真正存放页面数据的地方。
-
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
-
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
-
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
-
格式：<标签名 属性名=‘属性值’> 数据内容 </标签名>
<标签名 属性名=‘属性值’ /> -
操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。
font标签
- 字体标签：
例：<font size=5 color=red>字体标签示例</font>
注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。 - 标题标签：
……
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。 - 特殊字符：
如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。
| header 1 | header 2 |
|---|---|
| & lt; | < |
| & quot; | “ |
| & trade; | ™ |
| & gt; | > |
| & reg; | ® |
| & nbsp; | 空格 |
| & amp; | & |
| & copy; | © |
- 列表标签：<dl>
<dt>：上层项目
<dd>：下层项目
例：
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
列表中项目符号对应的标签
<ol>：数字标签（a A 1 i I）
<ul>：符号标签（○●■）
<li>：具体项目内容标签。此标签只在
-
中有效。
通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。
font-01
<html>
<head>
</head>
<body>
<font color='red' size="50">冰冰</font>
</body>
</html>
font-011
<!DOCTYPE html> <!-- 说明当前是html的文档 -->
<html><!-- html文件的根标签 -->
<head><!-- html的头标签,内部放的是属性相关 -->
<meta charset="UTF-8"><!-- 指明编码 -->
<title>font_01</title><!-- 设置当前文档的标题 -->
</head>
<body><!-- 体标签,放到是设置的内容 -->
<!-- font标签 可以通过16进制的数设置颜色(RGBA模式)
R:red G:green B:blue A:alpha(透明度)
[0,255] [0,255] [0,255] [0,1]
-->
<font color="#8E888E" size=60>冰冰</font>
<!-- 标题标签专门用来设置标题的,字号是固定,字体默认是加粗的 -->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!-- 特殊字符 -->
<font> <晨晨> </font>
</body>
</html>
图象
- 图像标签：<img>
例：
<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>
align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件
2. 图像地图：
<img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<map >
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>
image-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img_02</title>
</head>
<body>
<!--
src:是图片的路径
height:图片的高度
width:图片的宽度
默认的单位是像素(px),注意:以后最好所有的地方都将单位加上
通过绝对路径获取图片
注意:如果使用绝对路径访问资源无法获取资源,可以将file:///协议加上
-->
<img src="file:///C:\Users\Administrator\Desktop\BigData1715资料\JAVAWEB\day01\课程资料\今天资料1\图片\bingbing.jpg" height=100px width=100px/>美女
<!-- 工程内的图片可以通过相对路径找.
..代表向上一层
src=两部分 第一部分:..\..\..\..\ 找当前工程的目录
第二部分:images\120.jpg 图片的相对路径
-->
<img src="..\..\..\..\images\120.jpg" />美图
</body>
</html>
表格
-
表格标签：<table>
组成：标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr> -
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
格式：
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>张三</td>
<td>23</td>
</tr>
</table>
效果：
| 姓名 | 年龄 |
|---|---|
| 张三 | 23 |
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>张三</td>
<td>23</td>
</tr>
</table>
table-03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table_03</title>
</head>
<body>
<!--
tr:代表行
td:代表单元格
th:代表头标签,默认加粗
cellpadding:设置的是内容到左边框的距离
cellspacing:设置的是单元格之间的间隙
-->
<table border=1px height=500px width=500px cellpadding=10px cellspacing=10px>
<tr>
<th>姓名</th>
<td>年龄</td>
<td>美照</td>
</tr>
<tr>
<td>冰冰</td>
<td>18</td>
<td><img src="..\..\..\..\images\bingbing.jpg" height=100px width=50px/></td>
</tr>
</table>
</body>
</html>
超链接标签：<a>
两种用法：
- 超链接<a href=””>
例：
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<!-- href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->
- 定位标记<a name=””>
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效。
例：
<a name=”标记”>标记位置</a>
<p>……<!--很多空行以制造网页过长的效果 -->
<a href=”#标记”>返回标记位置</a>
注：使用定位标记时一定在href值的开始加入#标记名。
href-04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链_04</title>
</head>
<body>
<!-- 超链接
file:/// 代表获取的是本地的路径
http:// 或https:// 代表访问网络路径,如果什么协议都不写默认是file:///
href:放的是超链接的地址
a的内容是进行超链接的内容
-->
<a href="font_011.html">haha</a>
<a href="www.baidu.com">baidu</a>
<!-- 刷新当前的界面 -->
<a href="">ook</a>
</body>
</html>
表单标签：<form>
表单标签是最常用的标签，用于与服务器端的交互。
<input>：输入标签 ：接收用户输入信息。
其中的type属性指定输入标签的类型。
- 文本框 text。输入的文本信息直接显示在框中。
- 密码框 password。输入的文本以原点或者星号的形式显示。
- 单选框 radio 如：性别选择。
- 复选框 checkbox 如：兴趣选择。
- 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
- 提交按钮 submit 用于提交表单中的内容。
- 重置按钮 reset 将表单中填写的内容设置为初始值。
- 按钮 button 可以为其自定义事件。
- 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
- 图像 image 它可以替代submit按钮。
<select>：选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
<option>：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。
<textarea>：多行文本框。如：个人信息描述。
<label>：用于给各元素定义快捷键。
for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。
accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。
例：
<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />
表单提交：
1． 先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。
2． 明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。
-
get和post这两种最常用的提交方式的区别：
1．
- get提交将数据显示在地址栏，对于敏感信息不安全。
- post提交不显示在地址栏，对于敏感信息安全
2． 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。
post可以提交大体积数据。3． 对提交数据的封装方式不同：
-
get：将提交数据封装到了http消息头的第一行，请求行中。
-
post：将提交的数据封装到消息头后，在请求数据体中。
-
注意：通常表单使用post提交，因为编码方便。
-
对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。
通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。
form-05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_05</title>
</head>
<body>
<!-- 表单标签
作用:可以直接将表单的内容提交到服务器
常用作:登录界面,注册界面等
action:指定表单的提交服务器的地址
提交数据的方式:get,post
区别:get方式提交的数据会直接显示在网址上,不安全
post:不会显示在网址上,数据比较安全
method:设置提交数据的方式,默认是get
br:换行标签
-->
<form action="" method="get">
<!-- 单行文本框 -->
姓名:<input type="text" name="user"/><br/>
密码:<input type="password" name="pwd"/><br/>
<!-- 单选框: 通过name属性设置分组 通过checked设置默认选项 -->
性别:<input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女<br/>
<!-- 复选框 -->
爱好:<input type="checkbox" name="hobby" />java <input type="checkbox" name="hobby" />大数据 <input type="checkbox" name="hobby" />php<br/>
上传文件:<input type="file"><br/>
<!--下拉列表 selected:默认项-->
国籍:<select>
<option>中国</option>
<option>美国</option>
<option>朝鲜</option>
<option selected="selected">巴基斯坦</option>
</select><br/>
<!-- 普通按钮 value是按钮的名字 onclick:是点击按钮触发的事件 alert(内容):是一个提示的方法 -->
普通按钮:<input type="button" value="普通按钮" onclick="alert('哈哈')"/><br/>
<!-- 多行文本框 row:行数 cols:列数 -->
个人介绍:<textarea rows="4" cols="50" />我们该下课了</textarea>
<!-- 提交:专门用来提交当前的表单信息 -->
<input type="submit" value="提交" /><br/>
<!-- 重置:将当前表单的状态恢复到最开始的状态,不代表情况 -->
<input type="reset" value="重置" /><br/>
</form>
</body>
</html>
form-table-06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_table_06</title>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<th>姓名:</th>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<th>密码:</th>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<th>性别:</th>
<td><input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女</td>
</tr>
<tr>
<th>爱好:</th>
<td><input type="checkbox" name="hobby" />java <input type="checkbox" name="hobby" />大数据 <input type="checkbox" name="hobby" />php</td>
</tr>
<tr>
<th>上传文件</th>
<td><input type="file"></td>
</tr>
<tr>
<th>普通按钮</th>
<td><input type="button" value="普通按钮" onclick="alert('哈哈')"/></td>
</tr>
<tr>
<th>国籍</th>
<td><select>
<option>中国</option>
<option>美国</option>
<option>朝鲜</option>
<option selected="selected">巴基斯坦</option>
</select></td>
</tr>
<tr>
<th>个人介绍</th>
<td><textarea rows="4" cols="50" />我们该下课了</textarea></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="提交" /><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
CSS
- DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性
- 样式分为行内样式、内嵌样式、外部样式
- 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类
- <DIV>和<SPAN>都是容器标签，<DIV>是块级标签，可包含段落、标题等，<SPAN>是行级标签，不能包含段落、标题等，只能包含部分文字
行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式:通过style直接给某个具体的标签设置样式</title>
</head>
<body>
<!-- 通过style设置的是行内样式,缺点:只能作用于当前的标签,如果有一批拥有相同样式的标签,需要写很多重复的代码,造成冗余 -->
<p style="color:red;font-size:50px;" >
冰冰真漂亮
</p>
<p style="color:red;font-size:50px" >
晨晨开心
</p>
</body>
</html>
内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式(内嵌样式)</title>
<!-- 实现内嵌样式的方式
html选择器
class类选择器
id选择器
缺点:只能供当前的文件使用,其他的文件不能使用
<style type="text/css" >这是是css的代码</style>
-->
<!-- html选择器
构成:标签+{给这个标签设置的样式}
-->
<style type="text/css" >
p{
font-size:50px;
color:red;
font-family:楷书;
}
font{
font-size:30px;
color:green;
font-family:楷书;
}
</style>
<!-- class类选择器
构成:.+名字+{设置的样式}
-->
<style type="text/css">
.myInput{
font-size:100px;
color:blue;
font-family:楷书;
}
</style>
<!-- ID选择器
构成:#+id的名字+{设置的样式}
缺点:因为标签本身有id属性,当与id选择器同时使用的时候出现了两个id,id选择器有可能失效
-->
<style type="text/css">
#myname{
font-size:200px;
color:blue;
font-family:楷书;
}
</style>
<!-- 伪类(特殊类型的样式表):专门用于超链接
构成:通过HOVER设置当鼠标放在超链接上,内容的显示状态
text-decoration:划线 overline:上划线 underline:下划线
-->
<style type="text/css">
a{
font-size:200px;
color:blue;
font-family:楷书;
text-decoration:overline;
}
a:HOVER{
font-size:100px;
color:red;
font-family:楷书;
text-decoration:underline;
}
</style>
</head>
<body>
<p>冰冰1</p>
<p>冰冰1</p>
<p>冰冰1</p>
<font>冰冰2</font>
<font class="myInput">冰冰3</font>
<font id="3" id="myname" >冰冰4</font>
<a href="css1.html">真热</a>
</body>
</html>
外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!-- 获取外部的css文件 -->
<link rel="stylesheet" type="text/css" href="..\..\..\..\css\mycss.css">
</head>
<body>
<P >该下课了,累了</P>
<!-- span:给几个文字设置属性 -->
<h1>一会儿芳姐给大家发红包<span style="color:red;font-size:100px">1000</span>元</h1>
</body>
</html>
div:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div:层</title>
</head>
<body>
<!-- z-index:是z轴上的索引,值越大离我们越近
世界坐标:参考物是地球
本地坐标:参考物是自身
-->
<div id="layer1" style="background-color:red;width:100px;height:100px;top:50px;left:50px;z-index:3;position:absolute">
<img src="..\..\..\..\images\120.jpg" height=50px width=50px />美图
<p>这里是第一层包含图片,文字</p>
</div>
<div id="layer2" style="background-color:green;width:100px;height:100px;top:120px;left:120px;z-index:4;position:absolute">
<img src="..\..\..\..\images\bingbing.jpg" height=50px width=50px />美图
<p>这里是第二层包含图片,文字</p>
</div>
</body>
</html>
JavaScript
js小结
- 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件
- JavaScript 中声明变量：var 变量名
- “+”可以用于两个数相加，还可以用于连接字符串
- parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数
- 运算符号分为算术运算符、比较运算符、逻辑运算符
- 条件语句分为if语句，if-else语句、if的嵌套
- 多分支语句switch根据表达式的值，进入不同的分支执行
基本理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1:基本理解</title>
<!-- 注意:代码的执行顺序是从上到下
<script type="text/javascript">
//第一种方式:这里写js的代码--将js代码内嵌到html
//alert("这是提示方法"); // 直接出一个提示框
document.write("ok"); //在屏幕上写内容
</script>
-->
<!-- 第二种使用外部链接 -->
<script type="text/javascript" src="..\..\..\..\js\myjs.js"></script>
<!-- js:javascript
分成三部分:ECMAScript:内部包含js的基本语法,ECMA:是一个国际化的组织
BOM:Brower Object Model:处理的是与当前页面相关的各种配套功能
DOM:Document Object Model:处理的是当前页面的内容
-->
</head>
<body>
<h2>哈哈</h2>
</body>
</html>
基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2:基本语法</title>
<!--常量:变量
var:在js中他代表所有的数据类型,因为js是弱语法,var后面变量的类型由后面具体的值确定
注意:在js中使用变量前要先给变量赋值,如果不赋值直接使用会报undefind(未定义)错误.因为这个变量没有默认值
window:是一个窗口类,在使用他的方法的时候,可以省略当前的名字,直接使用方法
document:是当前的页面类,write方法是他内部的方法,而document在调用方法的时候,前面的对象不能省略.
write方法:作用是将内容写到页面上
+:1.相加 2.字符串拼接
-->
<script type="text/javascript">
34;
2.3;
var a = 4;
var b = 3.4;
var c ;
c = 4;
alert(c);
var x;
x = prompt("淘宝网竞拍,请出一口价",1);//第一个参数是提示信息 第二个参数是输入框内的默认值--1
document.write("拍卖价格:"+x);
document.write("恭喜你拍卖成功!");
alert("吃"+x+"斤饭");
</script>
</head>
<body>
</body>
</html>
流程控制语句和函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js3:流程控制语句和函数</title>
<!-- 求两个数的商
1.写对应的标签
2.使用js的函数实现求商的过程
3.将得到的结果重新交给标签显示
-->
<script type="text/javascript">
//全局变量:直接写在script内部的变量
//特点:可以省略var
//var d = 3;
d = 3;
//2.使用js的函数实现求商的过程
//函数的构成:function 函数名(参数列表){函数体}
function div(){
//获取三个标签对象
var input1 = document.getElementById("1");
//通过name调用
//var input11s - document.getElementsByName("number1");
//var input11 = input11s[0];
var input2 = document.getElementById("2");
var input3 = document.getElementById("3");
//获取值-默认都是字符串
var num1 = input1.value;
var num2 = input2.value;
//求商--转换成浮点型计算
var shang = parseFloat(num1)/parseFloat(num2);
alert(shang);
//3.将得到的结果重新交给标签显示
//将值传给input3
input3.value = shang;
//注意点:在js中两个整数相除得到的是小数,在java中得到的是整数
var x =3,y = 2;
var z = x/y;
document.write(z);
//流程控制语句
if(1){//在js中,0代表false 非零代表ture
}
var dd = 2;
switch(dd){
case 1:{
}
break;
case 2:{
}
break;
default:
break;
}
}
</script>
</head>
<body>
<!-- 1.写对应的标签 -->
第一个数:<input id="1" type="text" name="number1" value="11"/><br/>
第二个数:<input id="2" type="text" name="number2" /><br/>
商:<input id="3" type="text" name="number3" />
<!-- onclick:是一个点击事件,我们将点击按钮触发事件的过程称为事件驱动 -->
<input type="button" value="求商" onclick="div()"/>
</body>
</html>
图片自动更新
<!DOCTYPE html>
<html>
<head>
<!-- meta作用:
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
1.标识了创作者和编辑软件
2.描述了该文档和它的关键词
3.重定向
属性:
name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。
通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，
会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME
文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，
但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。
对应的值有:content-type expires refresh set-cookie
content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
-->
<meta charset="UTF-8">
<!-- 通过meta标签设置页面的刷新
根据下面的设置,当前页面会自动每隔1秒刷新一次
-->
<meta http-equiv="refresh" content="1">
<title>美女自动更新</title>
<script type="text/javascript">
document.write("<center><h2>这里是美女们,每一秒更新一次</h2></center>");
//Math.floor :向下取整 ceil:向上取整 round:四舍五入 random是取随机数,范围[0,1)
var a = Math.round(Math.random()*8+1)
document.write("<center><img height=400px width=600px src=..\\..\\..\\..\\images\\"+a+".jpg></center>");
</script>
</head>
<body>
</body>
</html>
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>买美女</title>
</head>
<body>
<!-- onMouseOver:是鼠标移到图片上面的时候触发 onMouseOut:是鼠标离开图片的时候触发 -->
<img src="..\..\..\..\images\美女1.jpg" width=200px height=300px align="center" onMouseOver="src='..\\..\\..\\..\\images\\美女03.jpg'" onMouseOut="src='..\\..\\..\\..\\images\\美女1.jpg'">
低价拍卖美女
<h2>移过来看看我啊</h2>
</body>
</html>
漂浮的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漂浮的图片</title>
<script type="text/javascript">
//随机生成层的top和left
function fun(){
document.getElementById("myDiv").style.left = Math.floor(Math.random()*500)+"px";
document.getElementById("myDiv").style.top = Math.floor(Math.random()*500)+"px";
//刷新函数:定期刷新,第一个参数是:要执行的功能 第二个参数:刷新的时间
setInterval("fun()",50);
//只刷新一次
//setTimeout("fun()",100);
}
</script>
</head>
<!-- onload(函数):当当前页面加载完成后,执行后面的函数,只执行一次 -->
<body onload="fun()">
<div id="myDiv" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:red;z-index:1">
<img src="..\..\..\..\images\1.jpg" width=100px height=100px>
</div>
</body>
</html>
鼠标获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标获取onfocus释放onblur焦点</title>
<style type="text/css">
input{
color:green;
font-size:20px;
background-color:red;
border:1px solid;
}
</style>
<script type="text/javascript">
//点击
function myFocus(){
var value = document.getElementById("user").value;
if(value == "请注意格式10XXXXXXX")
document.getElementById("user").value = "";
}
//离开
function myBlur(){
var value = document.getElementById("user").value;
if(value.substr(0,2) != "10"){
alert("输入不符合规则");
//重新获取焦点
document.getElementById("user").value.focus();
}
}
</script>
</head>
<body>
<!-- onfocus:当鼠标点击输入框触发的事件 onblur:当鼠标离开的时候触发的事件 -->
卡号:<input id="user" type="text" value="请注意格式10XXXXXXX" onfocus="myFocus()" onblur="myBlur()"><br><br>
密码:<input type="text">
</body>
</html>
js中的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的数组</title>
<!-- typeof的使用:是js中一个函数,把类型信息当字符串返回
可能返回的结果可能有六种:nuber,string,object,function,boolean,undefined
number:说明是数字
string:字符串
object:说明是Array,Null,对象
function:说明是函数
boolean:说明是布尔值
undefined:说明是类型未定义
typeof可以判断一个变量是否存在
如:if(typeof a !="undefeined") 不要直接使用if(a) 这样如果a不存在(未声明),就会出错
注意:对于数组,Null等特殊的对象,会返回object,这是typeof的局限性
如果我们希望获取某个变量(对象)是否是某个类的实例可以使用instanceof
-->
<script type="text/javascript">
//注意点:1.js中的数组是动态的,可以直接添加元素
//2.可以同时存储多个不同类型的变量
//第一种创建方法 10没有太大的意义
var arr1 = new Array(2);
arr1[0] = 2;
arr1[1] = 3;
arr1[2] = 6;
arr1[3] = true;
for(var i=0;i<arr1.length;i++){
document.write("元素:"+arr1[i]+"<br>");
}
//alert(typeof arr1); //object
//alert(typeof Array); //function
//alert(typeof 1);//number
//alert(arr1 instanceof Array);
//第二种
var arr2 = [];
//第三种
var arr3 = new Array();
//第四种
var arr4 = Array();
</script>
</head>
<body>
</body>
</html>
生成随机验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成随机的验证码，用户输入验证码，验证用户输入的是否正确</title>
<script type="text/javascript">
var codes = "";
function setCodes(){
var arr = [")",3,"@","名",6,"&"];
//var codes = "";
if(codes != "")
codes="";
for(var i=0;i<4;i++){
var a = arr[Math.floor(Math.random()*arr.length)];
codes =codes+a;
}
//用来显示添加到层上的内容
document.getElementById("mydiv").innerHTML = codes;
}
function checkCodes(){
var bb = document.getElementById("user").value;
if(bb != codes){
alert("验证码不正确");
document.getElementById("user").value = "";
document.getElementById("user").focus();
//刷新验证码
setCodes();
}
}
</script>
</head>
<body onload="setCodes()">
输入验证码<input id="user" type="text" >
<div id="mydiv" style="display:inline; border:1px solid;" onclick="setCodes()"></div><br>
<input type="button" value="确定" onclick="checkCodes()">
</body>
</html>
统计字数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户在文本域中输入多个字符，当点击按钮时分别统计字符串中大写字母，小写字母，
数字以及其他字符的个数并把统计结果显示在div中</title>
<script type="text/javascript">
//统计个数
function check(){
var str = document.getElementById("textarea").value;
var a=b=c=0;
for(var i=0;i<str.length;i++){
var tt = str.charAt(i);
//大写字母
if(tt>="A" && tt<="Z"){
a++;
}else if(tt>="a" && tt<="z"){//小写字母
b++;
}else if(tt>="0" && tt<="9"){//数字
c++;
}
}
document.getElementById("div").innerHTML = "一共有大写字母:"+a+"小写字母:"+b+"数字:"+c+"其他字符:"+(str.length-a-b-c);
}
//统计字符个数
function counts(){
//设置可以输入的最大的值---100
if(document.getElementById("textarea").value.length>100){
document.getElementById("textarea").value = document.getElementById("textarea").value.substr(0,100);
}
var length = document.getElementById("textarea").value.length;
var sheng = 100-length;
document.getElementById("span").innerHTML = "还剩下("+sheng+")个字";
if(sheng == 0)
document.getElementById("span").style.color="red";
}
</script>
</head>
<body>
<textarea id="textarea" rows="5" cols="10" onkeyup="counts()"></textarea>
<span id="span"style="color:blue;font-size:20px">还剩下(100)个字</span>
<input type="button" value="统计" onclick="check()">
<div id="div" style="position:absolute;left:50px;top:100px;width:200px;height:200px;z-index:1;background-color:gray"></div>
</body>
</html>
标签与js分离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签与js分离</title>
<script type="text/javascript">
//当页面都加载完成之后,在执行它
window.onload = function(){
button = document.getElementById("btn");
button.onclick = function (){
alert("hehe");
}
}
//因为这样直接调用,button对象还没有创建
<!-- var button = document.getElementById("btn");
button.onclick = function (){
doucment.write("gggod");
}
-->
//原来的方式
//function fun(){
// doucment.write("gggod");
//}
</script>
</head>
<body>
<input id="btn" type="button" value="确定" onclick="fun()">
</body>
</html>
js的工具类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的工具类</title>
<!--创建.js文件作为工具类,将要使用的方法写在js文件里面,
注意:两个函数之间要用,隔开
格式: var Util(名字) = {
//函数1
函数名:function(参数){函数体},
//函数2
函数名:function(参数){函数体},
...
} -->
<script src="..\..\..\..\js\Util.js"></script>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
//alert("这里是test");
Util.test();
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
var year = 2014;
var isTrue = Util.isLeapYear(year);
//if((year%4==0 && year%100!= 0) || (year%400==0)){
// alert("这是闰年");
//}else{
// alert("这不是闰年");
//}
alert(isTrue);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="点我">
<input id="btn2" type="button" value="判断是否是闰年">
</body>
</html>