HTML + CSS + JavaScript速成

深藏阁楼爱情的钟 2023-07-07 15:59 4阅读 0赞

### 文章目录 ###

*  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/CSS/JavaScript #

## HTML ##

### Html HyperText Markup Language内容 ###

1.  Html就是超文本标记语言的简写，是最基础的网页语言。
2.  Html是通过标签来定义的语言，代码都是由标签所组成。
3.  Html代码不用区分大小写。
4.  Html代码由开始结束。里面由头部分和体部分两部分组成。
5.  头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
6.  体部分是真正存放页面数据的地方。

*  多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
 *  想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
 *  属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
 *  格式：<标签名 属性名=‘属性值’> 数据内容 </标签名>  
    <标签名 属性名=‘属性值’ />
 *  操作思想：  
    为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。  
    标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

### font标签 ###

1.  字体标签：  
    例：<font size=5 color=red>字体标签示例</font>  
    注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式\#FF0000两个数为一组，按红，绿，蓝排列，如：\#00FF00表示绿色。建议用工具选取。
2.  标题标签：
    
     
    
    ## …… ##
    
      
    因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
3.  特殊字符：  
    如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

<table> 
 <thead> 
  <tr> 
   <th>header 1</th> 
   <th>header 2</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&amp; lt;</td> 
   <td>&lt;</td> 
  </tr> 
  <tr> 
   <td>&amp; quot;</td> 
   <td>“</td> 
  </tr> 
  <tr> 
   <td>&amp; trade;</td> 
   <td>™</td> 
  </tr> 
  <tr> 
   <td>&amp; gt;</td> 
   <td>&gt;</td> 
  </tr> 
  <tr> 
   <td>&amp; reg;</td> 
   <td>®</td> 
  </tr> 
  <tr> 
   <td>&amp; nbsp;</td> 
   <td>空格</td> 
  </tr> 
  <tr> 
   <td>&amp; amp;</td> 
   <td>&amp;</td> 
  </tr> 
  <tr> 
   <td>&amp; copy;</td> 
   <td>©</td> 
  </tr> 
 </tbody> 
</table>

1.  列表标签：<dl>  
    <dt>：上层项目  
    <dd>：下层项目  
    例：

列表中项目符号对应的标签  
<ol>：数字标签（a A 1 i I）  
<ul>：符号标签（○●■）  
<li>：具体项目内容标签。此标签只在

1.   *  中有效。  
        通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。

font-01

font-011

<!DOCTYPE html> 
    <html>
    <head>
    <meta charset="UTF-8">
    <title>font_01</title>
    </head>
    <body>
        
    	<font color="#8E888E"  size=60>冰冰</font>
    	
    	
    	<h1>标题</h1>
    	<h2>标题</h2>
    	<h3>标题</h3>
    	<h4>标题</h4>
    	<h5>标题</h5>
    	<h6>标题</h6>
    	
    	
    	
    	<font> <晨晨> </font>
    </body>
    </html>

### 图象 ###

1.  图像标签：<img>  
    例：

align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件  
2. 图像地图：  
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。  
map标签要和img标签联合使用。Href是超连接

image-01

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>img_02</title>
    </head>
    <body>
    	
       <img src="file:///C:\Users\Administrator\Desktop\BigData1715资料\JAVAWEB\day01\课程资料\今天资料1\图片\bingbing.jpg" height=100px width=100px/>美女
    
    
    	
    	<img src="..\..\..\..\images\120.jpg" />美图
    </body>
    </html>

### 表格 ###

*  表格标签：<table>  
    组成：标题标签：<caption>，给表格提供标题。  
    表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。  
    行标签：<tr>
 *  单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。  
    格式：

效果：

table-03

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>table_03</title>
    </head>
    <body>
    
    	<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> ###

两种用法：

1.  超链接<a href=””>  
    例：

1.  定位标记<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>
    	
    	<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键组合使用。

例：

表单提交：

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>
    
     <form action=""  method="get">
     
     
     	姓名:<input type="text"  name="user"/><br/>
     	密码:<input type="password" name="pwd"/><br/>
     	
     	性别:<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/>
     	
     	国籍:<select>
     		<option>中国</option>
     		<option>美国</option>
     		<option>朝鲜</option>
     		<option selected="selected">巴基斯坦</option>
     	</select><br/>
     	
     	普通按钮:<input type="button" value="普通按钮"  onclick="alert('哈哈')"/><br/>
     	
     	个人介绍:<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>
    
    	<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>
    
     
     
     <style type="text/css" >
     	p{
     		font-size:50px;
     		color:red;
     		font-family:楷书;
     	}
     	
     	font{
     		font-size:30px;
     		color:green;
     		font-family:楷书;
     	}
     	
     </style>
     
     
     <style type="text/css">
     	.myInput{
     		font-size:100px;
     		color:blue;
     		font-family:楷书;
     	}
     
     </style>
     
     
      <style type="text/css">
      	#myname{
      		font-size:200px;
     		color:blue;
     		font-family:楷书;
      	}
      </style>
      
      
      <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>
    
    <link rel="stylesheet" type="text/css" href="..\..\..\..\css\mycss.css">
    </head>
    <body>
    	<P >该下课了,累了</P>
    	
    	
    	<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>
    
    <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"  src="..\..\..\..\js\myjs.js"></script>
    
    
    </head>
    <body>
    	<h2>哈哈</h2>
    </body>
    
    
    </html>

### 基本语法 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>js2:基本语法</title>
    
    <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>
    
    <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>
    
    第一个数:<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" />
    
    <input type="button"  value="求商" onclick="div()"/>
    </body>
    </html>

### 图片自动更新 ###

<!DOCTYPE html>
    <html>
    <head>
    
    
    <meta charset="UTF-8">
    
    <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>
    
    <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>
    
    <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>
    
    卡号:<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>
    
    
    <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对象还没有创建
     
    
    //原来的方式
    //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>
    
    <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>