HTML + CSS + JavaScript速成
2024-04-03 10:45:39
文章目录
- HTML/CSS/JavaScript
- HTML
- Html HyperText Markup Language内容
- font标签
- font-01
- font-011
- 图象
- image-01
- 表格
- table-03
- 超链接标签：<a>
- href-04
- 表单标签：<form>
- form-05
- form-table-06
- CSS
- 行内样式
- 内嵌样式
- 外部样式
- div:
- JavaScript
- js小结
- 基本理解
- 基本语法
- 流程控制语句和函数
- 图片自动更新
- 实例
- 漂浮的图片
- 鼠标获取
- js中的数组
- 生成随机验证码
- 统计字数
- 标签与js分离
- js的工具类
- HTML
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. 图像地图：
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。
map标签要和img标签联合使用。Href是超连接
<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:设置提交数据的方式,默认是getbr:换行标签--><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);//第一个参数是提示信息 第二个参数是输入框内的默认值--1document.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.将得到的结果重新交给标签显示//将值传给input3input3.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-cookiecontent 属性
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(){//设置可以输入的最大的值---100if(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>HTML + CSS + JavaScript速成相关推荐
- HTML+CSS+JavaScript速成
文章目录 HTML/CSS/JavaScript HTML Html HyperText Markup Language内容 font标签 font-01 font-011 图象 image-01 表 ...
- HTML5期末大作业：游戏网页网站设计——卡通的萌王游戏网页(13页) HTML+CSS+JavaScript
HTML5期末大作业:游戏网页网站设计--卡通的萌王游戏网页(13页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- 期末作业代码网页设计代码 游戏网页网站设计——卡通的萌王游戏网页(13页) HTML+CSS+JavaScript
HTML5期末大作业:游戏网页网站设计--卡通的萌王游戏网页(13页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- html,css,javascript之间的关系是什么？各是负责哪方面工作的？
html,css,javascript之间的关系是什么?各是负责哪方面工作的? html是xml的前身,你说的html是指单纯的静态页面,也就是写什么就是什么. css就是美化html,女人再漂亮也要 ...
- HTML CSS JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- 生日祝福（HTML+CSS+JavaScript+jQuery）
生日倒计时 下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
- Django 模板中使用css, javascript
Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...
- 张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例 图3-1 网站div结构布局示意图 3.2界 ...
最新文章
- firefox+firebug
- echart封装，前端简单路由，图表设置自动化
- ITK:转换三角网格为二进制图像
- FatFs - Generic FAT Filesystem Module
- “衰亡”的雅虎：30 亿用户账号全部泄漏还能怎么活？
- 数据挖掘：模型选择——KNN
- 强悍的 Linux —— tar
- win7计算机打开显卡设置在哪里,Win7系统nvidia控制面板在哪里？Win7系统nvidia控制面板设置方法...
- ADB 环境变量配置教学
- Python周刊491期
- 观点动力学模型：主要理论与模型综述
- 传统图像去噪方法（三）之非局部均值去噪（NLM）
- 华为云等保解决方案，全流程等保服务，帮助企业守护信息安全
- windows隐藏此电脑中默认文件夹
- winrar分卷压缩和解压
- 自然连接（NATURAL JOIN）
- zz一篇很赞同的文章：2008年以后房价会降？想都不要想
- vue自定义百度地图弹窗
- UML建模中简单消息、同步消息和异步消息
- 【mysql5.7】windows重装mysql后，将以前的数据库如何导入到新的数据库