首页 > 代码库 > java web基础1

java web基础1

2024-08-14 11:01:40   223人阅读

HTML 构建

CSS 外观

JS 添加动态效果




HTML

基础语法：

    标记 <标记名称>

        双标记(成对出现)

            <h1></h1>

        单标记(只有一个)

            <br/>

        为标记定义属性：

            描述标记的各个方面 空格隔开多个属性也用空格隔开 值可以用一对双引号或者一个单引号

        注释

            <!--注释内容-->

        

        版本信息 指定文档的语法规范

            严格：最新

            过度：兼容


            框架

        head 定义和整个文档相关的信息（标题/刷新/编码）

            头元素

                <meta />        

body 


HTML文档结构


版蹦信息

html页面

—文件头

—文档主题部分

           

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" content ="10"/><!--页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
	</head>
	
	
	<body>
	</body>

</html>

 

文本

    普通文本和特殊字符

        空格折叠:

            多个空格以及换行，折叠为1个

            特殊字符：转义字符

                    <  &lt;

                    > &gt;

                     空格 &nbsp;

    段落标记 HTML 段落是通过标签 <p> 来定义的.

        <p>文本</p> 自成段落，行间距

        <br/>  换行


   标题    HTML 标题是通过<h1>~<h6> 标签来定义的

        <h1 align="center"></h1>
        <h2 align="right"></h2>
        <h3></h3>

   分组

        <div></div> 适用于对于块级元素分组

        <span></span> 适用于对于行内元素分组

        块级元素 独占一行 

        行内元素 可以和其他元素位于同一行 

   图像和连接

        为页面添加图像

            <img src="http://www.mamicode.com/URL"/>
            <img src="http://www.mamicode.com/img/1.jpg"/ width=222>

    

   超链接

        <a href="http://www.baidu.com">超链接</a>
        <a href="http://www.batdu.com" target="_blank">打开新页面</a>


   同一页面的不同位置

    回到页面的顶端

        <a href="http://www.mamicode.com/#">top</a><!--固定的写法-->

    

   锚点

<a name="a1">hi</a>
<a href="http://www.mamicode.com/#a1">hi</a>


  列表:

    有序<ol></ol>

    无序<ul></ul>

    <li></li>

	<ul>
		<li>a</li>
		<li>aa</li>
		<li>aaa</li>
		<li>aaaa</li>
		<li>aaaaa</li>
	</ul>
	
	<ol>
		<li>a
			<ol>
				<li>aa</li>
				<li>aaa</li>
			</ol>
		</li>
		<li>b
			<ol>
				<li>bb</li>
				<li>bbb</li>
			</ol>
		</li>
		<li>c
			<ol>
				<li>cc</li>
				<li>ccc</li>
			</ol>
		</li>
		<li>d
			<ol>
				<li>dd</li>
				<li>ddd</li>
			</ol>
		</li>
	</ol>


   表格

	<table align="center" border=1 width=200 height=200><!--表格-->
		<tr><!--行-->
			<td width=2 height=2>a</td><!--格子-->
			<td align="center">bb</td>
		</tr>
		<tr>
			<td width=5 height=5>ccc</td>
			<td>dddd</td>
		</tr>
	</table>

行分组：

   thead

    tbody

      tfoot

特殊行或者列合并

    colspan

    rowspan

表格嵌套：复杂的布局

	<table border=1 width=200 height=200>
		<tr>
			<td>a</td>
			<td colspan=2 align="center">a</td>
		</tr>
		<tbody style="color:red">
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
		</tbody>
		<tr>
			<td>a</td>
			<td>a</td>
			<td>a</td>
		</tr>
		<tbody align=center style="color:red">
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
		</tbody>
	</table>


表单

 form：承载页面元素，备于做提交

    form 可以承载的

    input

        单标记 靠 type属性的不同来取值

        类型

        <input type="text"/>  文本框

        <input type="password"/> 密码框

        <input type="radio"/> 单选按钮

        <input type="checkbox"/> 多选

        <input type="submit"/> 提交按钮

        <input type="reset"/>重置按钮

        <input type="button"/>普通按钮

        <input type="file"/>选择文件以供上传使用

        <input type="hidden"/> 隐藏域

        属性

        id:唯一标识  需要的时候在添加

        name：名值对的方式提交数据

        value：取决于需要，比如有默认值

        maxlength 文本框，密码框

        readonly

        checked 单选多选


        列表框 下拉框

        <select size=10>

            <option></option>

        </select>

        多行文本框

        <textarea>

    

        </textarea>

        文本标签

        <label for="">文本</label>

        fieldset  元素圈 起来

            lengend:为圈添加名称描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" /><!--自动页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
	</head>
	<body>
		<h1>增加管理员</h1>
		<form>
			user:<input type="text" name="u" value="http://www.mamicode.com/123"/><br/>
			pwd:<input type="text" name="p" value="http://www.mamicode.com/123"/><br/>
			sex:<input type="radio" name="sex" value=http://www.mamicode.com/1/>M"radio" name="sex" value=http://www.mamicode.com/0/>F
"r1" type="checkbox" name="role" value="http://www.mamicode.com/root" />
				<label for="r1">root</label><br/>
				<input id="c1"type="checkbox" name="role" value="http://www.mamicode.com/client"/>
				<label for="c1">client</label><br/>
			</fieldset>
			status:<select name="status" size=3>
				<option>start</option>
				<option>stop</option>
				<option>del</option>
			</select ><br/>
			explain<textarea name="explain" cols=20 rows=10>个人简介
			</textarea>
			<input type="submit" value="http://www.mamicode.com/增加"/>
			<input type="reset" value="http://www.mamicode.com/重置"/>
		</form>
	</body>
</html>

    iframe

    一个浏览器中显示多个html页面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" /><!--自动页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
	</head>
	<body>
		<h1>增加管理员</h1>
		<form>
			user:<input type="text" name="u" value="http://www.mamicode.com/123"/><br/>
			pwd:<input type="text" name="p" value="http://www.mamicode.com/123"/><br/>
			sex:<input type="radio" name="sex" value=http://www.mamicode.com/1/>M"radio" name="sex" value=http://www.mamicode.com/0/>F
"r1" type="checkbox" name="role" value="http://www.mamicode.com/root" />
				<label for="r1">root</label><br/>
				<input id="c1"type="checkbox" name="role" value="http://www.mamicode.com/client"/>
				<label for="c1">client</label><br/>
			</fieldset>
			status:<select name="status" size=3>
				<option>start</option>
				<option>stop</option>
				<option>del</option>
			</select ><br/>
			explain<textarea name="explain" cols=20 rows=10>个人简介
			</textarea>
			<iframe src="http://www.mamicode.com/3.html"></iframe>
			<iframe src="http://baidu.com"></iframe>
			<input type="submit" value="http://www.mamicode.com/增加"/>
			<input type="reset" value="http://www.mamicode.com/重置"/>
		</form>
	</body>
</html>


CSS 基础

    内联方式 元素有个style  适用单个元素

    内部样式表 head 里添加一个style 

    文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" content ="10"/><!--自动页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
		<style type="text/css">
		h1{
			color:green
		}
		</style>
		<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/MyStyle.css"> 
	</head>
	
	<body>
		<h1>haha </h1>
		<p style="color:red;background-color:gray">haha</p>
	</body>

</html>
h2
{color:yellow;
font-size:50pt;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" content ="10"/>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
		h1{
			color:green
		}
		</style>
		<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/style.css"/>
	</head>
	
	<body>
		<h1>hehe</h1>
		<h1>haha </h1>
		<h2>hihi</h2>
		<p style="color:red;background-color:gray">haha</p>
		<a href="http://www.baidu.com">百度来了</a>
	</body>

</html>
h2{
color:yellow;
font-size:50pt;
}
a:link{
color:black;
}
a:hover{
font-size:20pt;
color:red;
}
a:active{
font-size:40pt;
color:green;
} 
a:visited{
font-size:80pt;
color:yellow



css 重复 没有冲突的并集，有冲突的就近远测

 优先级都一样的时候最后定义的生效

    选择器  谁来使用{}中定义的样式

        元素选择器： html中的标签名称

               简单，为某种标签定义样式但是不能跨类别，同一种下的细分也不行

        类选择器

            css中

            .s1{......

              .....}

            HTML中需要使用<标签 class="s1">

        分类选择器  定义更为清楚，同一种下的细分

            css中：

                input.txt{}

                input.img{}

            html中

                <p class="txt"></p>  无效

                <input class="txt"/>  有效

        元素ID选择器 严格的定义

            css中 

                #a1{}

            html中

                <h1 id="a1"></h1>


        派生选择器 已层次关系作为定义

        CSS中：div a{....}

        HTML中：<dive>

                asdf

                <a>fdsa</a>

                </div>



        选择器分组：需要为一些元素定义他们样式中相同的部分时

            CSS中

                p,input.txt,#a1{.....}

                

        伪类 在不同的状态下的样式

        a:link{}  未访问过

        a:active{} 激活

        a:hover{} 悬停

        a:visited{} 已访问过的

        xx:focus{} 获取焦点


    常用单位

        尺寸：% px pt

        颜色：十六进制

      



    常用的设置：

        width/height

        宽/高

        overflow:visible/hidden/scroll/auto

            溢出/隐藏/滚动条/自动

        定义所有的边框

        border:1px solid red;

        border-width:1px;

        border-style:solid;

        border-color:red;


        定义单边边框

        border-left:1px solid red;

        border-right:2px solid green;

        border-top:2px solid red;

        border-bootom:1px solid green;


    框模型 box modal 间距

    优先

        margin:30px

        margin-left

         right

            top

                bootm

        margin:10px 20px 30px 40px 

        顺时针 上 右 下 左

        margin:10px 30px

            上下 左右

        margin:0px auto;  居中


  背景

    background-color: 背景色

    background-image:url(img.jpg);

    background-repeat:填充  repeat/no-repeat/repeat-x/repeat-y  

                平铺/不平铺/x轴/y轴

    background-positioni:left top;

    background-attachment:   背景图像的附着方式



  文本

    font_family:字体

    color: 字体颜色

    font-size:字体大小

    font_weight:字体加粗 normal/bold;

    text-align:文本排列  center left right

    line-height:行高

    text-dexoration:文字修饰 none/underline  下划线

    text-indent:文本首行缩进

     

  表格

    border-collapse:separate/collapse;单元格

    vertical-align:top/middle/bottom; 垂直

        方向上的对齐，设置单元格中的垂直对齐

  浮动

    默认情况下 流模式布局

    float：left/right

    让元素脱离原有的布局，浮动起来。停靠到包含框的左侧或者右侧

        修改默认布局

    clear ：both/left/right --清楚附近浮动元素带来的影响

    


  显示

    html元素有默认的显示方式：块级  行内

    需要修改默认的显示方式

    display： static/block/inline/none

    


 列表样式

    list-style-type:none/disc/circle

    list-style-img

 定位

    默认流模式 修改原有的定位方式

    float 设置浮动 不能随意设置位置

    相对定位

    绝对定位

        position:static/relative/absolute/fixed; 属性

          更改定位模式为相对定位i，绝对定位或者固定定位

          脱离原来的层次

        偏移属性：实现元素框位置的偏移

        top/bottom/right/left:value;

        堆叠顺序;  value 越大  层越上

        z-index:value;       


  鼠标属性：

    cursor:defaulf/pointer/help/wait../image;





页面脚本代码:嵌入页面上。在浏览器运行

    javascript  基于对象和事件驱动的解释性语言，嵌入在页面上


    代码和事件关联 代码直接放在事件里

    script块 head 里面添加一个script，中间添加代码 用方法封装

    js文件，单独定义应给js的文件  在html中的head里用script引入


    基础语法：

        大小写敏感 已   ; 表示结束

        变量    var name = "lmdtx";  var age =18;

        使用var 声明变量 变量的类型以赋值为准

        标识符的 字母 数字 下划线 $组成

        不已 数字开头

        数据类型

                简单类型 string number bool

                特殊类型 null  undefined

                复杂类型 Array Date等等

                转义字符\

                UNICODE编码

                \u2f3f

        数据的转换：

        string+number  string

        string+bool  string/true

        number+bool number

        bool+bool  number

    

        x.toString();

        parseInt(xx);

        parseFloat(xx);

        typeof(xxx;)      判断类型


        NaN(not a number)

   

        ==  比较值

        ===    比较类型和值  严格等

        

        三目运算符

        表达式？value1：value2；



        流程控制

        if/else  switch/case


        for while



    内置对象

        对象 封装功能 使用（创建 属性 方法）

        String 对象

                和java中的类似

            创建： var s="sting";

                        var ss = new String("String");

            属性：s.length

            方法： toUpperCase ()

                        toLowerCase()

                        subString()

                        indexOf()

                        lastIndexOf()

                        charAt()

                        split()

                        replace() 支持正则

                        match() 支持正则

                        search()  支持正则


正则表达式 

匹配模式：i 忽略大小写，g全局 ,m多行



数组：

    var ary = new Array();

    a[0]="a";

    a[1]=1;

    a[2]=true;

or

    var ary=new Array("a",1,true);

or

    var array = ["a",1,true];

    array[3]=123;



创建二维数组

var a= new Array();

a[0]=[1,2];

a[1]=[2,3];



属性：

  a.length


方法：

    toString()  数组的内容以 逗号 连接 输出

    join("@") 以给定的字符连接

    concat(b);  小数组相加

    var a=[1,2,3]

    var b=[4,5,6]

    a.concat(b);

    [1,2,3,4,5,6]

    获取子数组

    var arr=[1,2,3,4,5,6,7,8,9]

    var arr1 = arr.slice(2,4);

    [3,4]

    数组反转

    var arr=[1,2,3,4];

    var arr = arr.reverse();

        [4,3,2,1]

    比较

    sort()  默认按照字符串

        自定义一个比较规则

            function sortF(a,b){

                return a-b;

            }

            sort(sortF)

    

Math 对象

    用Math.xxxx  不需要创建 

        属性 Math.pi

        方法：Math.abs()/round()/rand()/floor(3.7)/ceil(4.3)/max(x,y)

 

Number 对象

    var n= 123.123;

    n.toFixed();                                                                          


正则表达式对象

    var r = /[a-z]{1,10}/;

    t.test(str); ==> bool  true/false


Date 对象

    创建 var  d= new Date();

        当前时间

        or    

        var d= new Date("2016-08-08 12:12:12")



重载 js 中没有传统意义s行的重载  方法名相同，后定义的会覆盖前面定义的内容

使用arguments 的关键字来做模拟  arguments 是传入的参数是一个数组

根据对数组的判断来实现不同的功能

<form>
    <input type="button" value="http://www.mamicode.com/重载1" onclick="olmath(10);">
    <input type="button" value="http://www.mamicode.com/重载2" onclick="olmath(10,10);">
</form>
function olmath(){    
    if(arguments.length == 1){
      alert(arguments[0]*arguments[0]);    
  }else{
    alert(arguments[0]+arguments[1]);    
 }
}


方法的定义

   1}、 var f = new  Function("alter("hehe")");

 声明一个Function 对象 最后一个参数是方法体，其他的参数是方法的参数，以字符串的形式传入

    2}、匿名函数

    var f1 = function(){

        alert("haha");

    };

    f1();



eval()



DHTML 应用

    window

        location URL 地址栏

        screen 屏幕

        history 历史访问记录

        navigator    浏览器

        event    事件

        document 文档



    windows 表示整个窗口，窗口间的操作

        对话框：

            window.alert("str");

            window.confirm("str");

        单出窗口：   

            window.open(url);

            window.open(url,"name");

            window.open(url,"name",width=200,heigh=200);

        定时器：

        周期性定时器  var timer=   window.setInterval(showtime;1000);  创建一个定时器   第一参数需要执行的任务 第二个参数  时间间隔  毫秒

        window.clearInterval(timer);  取消定时器

       一次性定时器

       timer=window.setTimeout(f,10)

       window.clearTimeout(timer);



    document对象

          代表整个html文档 动态的操作页面元素。 必须使用这个



    找元素

    将HTML 标签对象化

    如果操作标记中间的文本

    obj.innerHTML

    修改样式

    obj.style.color

    修改复杂样式

        1可以在<style>中定义样式

            或者在css文件中定义

        2使用

        obj.className="s1"


方式一:document.getElementById(id)

    精确的查询单个元素对象，

方法二根据元素额层次位置查找.

        obj.parentNode  ---父节点

        obj.childNodes--所有的子节点

        obj.lastChild

        obj.firstChild


        obj.nodeName

        obj.type

方式三

    document.getElementsByTagName("a")  元素节点的数组

    obj.getElementByTagName("input")


增加新元素节点

    创建

     var obj = docment.createElement("a");

    设置信息

    obj.href="";

    obj.innerHTML="";

    加入到某个位置

    xxx.appendChild(obj);

    xxx.insertBefore(obj,xxx.fistChild);

    xxx.insertBefore(obj,xxx.childNodes[2]);



screen 对象

    screen  包含有关客户端显示屏幕的信息

    width/height (只读)


history 对象

    历史访问记录

        history.back();

        history.forward();


location 对象   地址栏

    location.href="";//保留历史访问记录

    location.replace("url");/、不保留  直接替换


navigator对象 与浏览器软件和操作系统相关信息


event 对象  事件

    事件的类别

        鼠标事件

            onclick

            ondblclick

            onmouseover

            onmouseout

        键盘事件

            onkeydown

            onkeyup

        状态事件

            onblur

            onfocus

            onchange

            onload

    事件的定义

        html 中静态的为元素定义事件

        obj. 动态额定义的


    事件被取消    

        onclick = "return false;" 取消当前的事件

    事件的冒泡机制

        当为层次包含的元素定义了相同额事件，出发事件时，从底层开始，层层向上，逐一额触发

    

    event对象    


        当页面发生任何一个事件，将事件相关的信息写入event对象    

        event.x

        event.y

        event.srcElement 引发事件的对象


    浏览器兼容问题

        Firefox js中不识别event，但在HTML中认识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>HTML5</title>
        <meta http-equiv="refresh"/>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" language="javascript">
            function M2(){
                alert("hi hi")
            }
        </script>
        <script src="http://www.mamicode.com/js1.js" type="text/javascript" language="javascript"></script>
    </head>
    
    
    <body>
        <form id="form1">
            <input type="button" value="http://www.mamicode.com/第1个按钮" onclick="alert(‘hi‘);"/>
            <input type="button" value="http://www.mamicode.com/第2个按钮" onclick="M2();";/>
            <input type="button" value="http://www.mamicode.com/第3个按钮" onclick="M3();";/>
            <input type="button" value="http://www.mamicode.com/第4个按钮" onclick="M4();";/>
            <input type="text" id="jisuanqi"/>
            <input type="button"/ value="http://www.mamicode.com/计算器" onclick="getSquare();">
            <input type="text" id="txt1" onblur="judgeNumber();"; />
            <input type="text" id="txt2" onblur="replaceString();"; />
            <input type="text" id="txt3" onblur="replaceString2();"; /><br/>
            <input type="text" id="txt4" />
            <input type="button" value="http://www.mamicode.com/反转" onclick="operteArray(1);"/>
            <input type="button" value="http://www.mamicode.com/排序1" onclick="operteArray(2);"/>
            <input type="button" value="http://www.mamicode.com/排序2" onclick="operteArray(3);"/><br/>
            <input type="text" id="txt5" />
            <input type="text" id="txt6" />
            <input type="button" value="http://www.mamicode.com/随机数" onclick="f1();"><br/>
            姓名:<input type="text" id="txt7" onblur="check();"/><br/>
            <input type="text" id="txt8" style="width:300px"/>
            <input type="button" value="http://www.mamicode.com/日期" onclick="makedate()" style="width:100px">
            <input type="text" id="txt9" style="width:50px"/>
            <input type="button" value="http://www.mamicode.com/日期-1" onclick="makedate2()"/><br/>
            
            <input type="button" value="http://www.mamicode.com/重载1" onclick="olmath(10);">
            <input type="button" value="http://www.mamicode.com/重载2" onclick="olmath(10,10);">
            <input type="button" value="http://www.mamicode.com/方法1" onclick="f3();">
            <input type="button" value="http://www.mamicode.com/方法2" onclick="f4();">
            <input type="button" value="http://www.mamicode.com/方法3" onclick="f5();"><br/>
            
            
            <input type="text" id="txt10"><br/>

            <table  border=1 ><!--表格-->
                <tr><!--行-->
                    <td><input type="button" value="http://www.mamicode.com/1" onclick="f6(this.value);"></td><!--格子-->
                    <td ><input type="button" value="http://www.mamicode.com/2" onclick="f6(this.value);"></td>
                    <td ><input type="button" value="http://www.mamicode.com/3" onclick="f6(this.value);"></td>
                </tr>
                <tr>
                    <td><input type="button" value="http://www.mamicode.com/4" onclick="f6(this.value);"></td>
                    <td><input type="button" value="http://www.mamicode.com/5" onclick="f6(this.value);"></td>
                    <td><input type="button" value="http://www.mamicode.com/6" onclick="f6(this.value);"></td>
                </tr>
                <tr>
                    <td><input type="button" value="http://www.mamicode.com/7" onclick="f6(this.value);">    </td>
                    <td><input type="button" value="http://www.mamicode.com/8" onclick="f6(this.value);"></td>
                    <td><input type="button" value="http://www.mamicode.com/9" onclick="f6(this.value);">    </td>
                </tr>
                <tr>
                    <td><input type="button" value="http://www.mamicode.com/0" onclick="f6(this.value);"></td>
                    <td><input type="button" value="http://www.mamicode.com/." onclick="f6(this.value);"></td>
                    <td><input type="button" value="http://www.mamicode.com/C" onclick="f6(this.value);"></td>
                    
                </tr>
                <tr>
                    <td><input type="button" value="http://www.mamicode.com/+" onclick="f6(this.value);"></td>
                    <td><input type="button" value="http://www.mamicode.com/-" onclick="f6(this.value);"></td>
                    <td><input type="button" valuehttp://www.mamicode.com/="=" onclick="f6(this.value);"></td>                
                </tr>
            </table>
            
            <input type="submit"  value="http://www.mamicode.com/删除" onclick="return del();"><br/>
            
            
            <input type="text" id= "showtimetext"/>
            <input type="button" onclick="showtime()" value="http://www.mamicode.com/显示时间"/>
            <input type="button" onclick="showtime2()" value="http://www.mamicode.com/时钟"/>
            <input type="button" onclick="showtime3()" value="http://www.mamicode.com/暂停时钟"/>
            <input type="button" onclick="waitAlert()" value="http://www.mamicode.com/5s 弹出hi"/>
            点击<a href="javascript:cancelAlert();" >取消</a>关闭；
            <p id="txt11">a</p>
            <input type="button" onclick="testDOM();" value="http://www.mamicode.com/a变b">
            <img id="txt12" src="http://www.mamicode.com/img/ok.png"/>
            <input type="button" onclick="testDOM2();" value="http://www.mamicode.com/对变错">
            
            <p>注册：</p>
            用户名：<input type="text" id="txtName" onblur="validName();"/><span id="nameInfo"> 5-10个英文字母</span><br/>
            密码：<input type="text" id="txtAge" onblur="validAge();"/><span id="ageInfo">3位以内的数字</span><br/>
            <input  type="submit" value="http://www.mamicode.com/注册" onclick="return validData();"/>
            
            购物车：
            <table border="1" id="shopping">
                <tr>
                    <td>商品名称</td>
                    <td>单件价格</td>
                    <td>商品数量</td>
                    <td>小计</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>10</td>
                    <td>
                        <input type = "button" value="http://www.mamicode.com/-" onclick="sub(this);"/>
                        <input type = "text"  value="http://www.mamicode.com/1"/>
                        <input type = "button" value="http://www.mamicode.com/+" onclick="add(this);"/>
                    </td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td>20</td>
                    <td>
                    <input type = "button" value="http://www.mamicode.com/-" onclick="sub(this);"/>
                        <input type = "text" value="http://www.mamicode.com/1" />
                        <input type = "button" value="http://www.mamicode.com/+" onclick="add(this);"/>
                    </td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>30</td>
                    <td>
                    <input type = "button" value="http://www.mamicode.com/-" onclick="sub(this);"/>
                        <input type = "text" value="http://www.mamicode.com/1" />
                        <input type = "button" value="http://www.mamicode.com/+" onclick="add(this);"/>
                    </td>
                    <td>30</td>
                </tr>
            </table>
            总计：<span id="sum" ></span>
            <br/>
            
            
            <input  type="button"  value="http://www.mamicode.com/增加一个超链接" onclick="ab();">
            <br/>
            <select id="s1" onchange="showNumber();" >
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            </select>
            <select id="s2">
            <option>0</option>
            </select>
            <br/><br/><br/><br/><br/><br/><br/><br/>
            
            <h3>增加一个新的商品</h3>
            商品名称：<input type="text" id="spName"><br/>
            商品价格：<input type="text" id="spPrice"><br/>
            <input type="button" value="http://www.mamicode.com/增加" onclick="addThis()">
            <table border="1" id="t2">
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                </tr>
            </table>
            <br/>
            <input type="button" value="http://www.mamicode.com/遍历" onclick="bianli();"><br/>
            改进版计算器<br/>
            <div  onclick="cal(event);">
                <input type="button" value="http://www.mamicode.com/1"/>
                <input type="button" value="http://www.mamicode.com/2"/>
                <input type="button" value="http://www.mamicode.com/3"/>
                <input type="button" value="http://www.mamicode.com/+"/>
                <input type="button" value="http://www.mamicode.com/-"/>
                <input type="button" valuehttp://www.mamicode.com/="="/>
                <br/>
                <input type="text" id="id1"/>
            
            </div>
        </form>
    </body>

</html>


function M3(){
    alert("no no");
    
}
function M4(){
    alert("\u2f3f");
}
function getSquare(){
    var number = document.getElementById("jisuanqi").value;
    if(isNaN(number)){
        alert("enter number")
    }else{
    var n = parseFloat(number);
    alert(n*n);    
    }
    
}
function returnType(){

    var something=true;
    alert(typeof(something));
}

function judgeNumber(){
 var result=100;
 var n=parseInt(document.getElementById("txt1").value);
 alert(n>result?"大了":"小了"); 
}


function replaceString(){
    var str= document.getElementById("txt2").value;
    var r = str.replace("b","*")
    document.getElementById("txt2").value=http://www.mamicode.com/r;"txt3").value=http://www.mamicode.com/document.getElementById("txt3").value.replace(/b/gi,"*");
}

function operteArray(n){
    var array = document.getElementById("txt4").value.split(",");
    switch(n){
            case 1:
                array.reverse();
                break;
            case 2:
                array.sort();
                break;
            case 3:
                break;
    }
    alert(array.join("||"))
    
}

function f1(){
    var minNumber= parseInt(document.getElementById("txt5").value);
    var maxNumber= parseInt(document.getElementById("txt6").value);
    difference=maxNumber-minNumber;
    alert(Math.floor(Math.random()*difference+minNumber));//3-15之间的随机数
}

function check(){
    var str = document.getElementById("txt7").value
    var r =/^[\u4e00-\u9fa5]{2,8}$/;
    if(r.test(str)){
        alert("yes");
        
    }else{
        alert("error");
    }
}

function makedate(){
    var d = new Date();
    document.getElementById("txt8").value=http://www.mamicode.com/d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
}


function makedate2(){
    var d = new Date(document.getElementById("txt8").value);
    alert(d.setDate(d.getDate-3));
}


function olmath(){
    if(arguments.length == 1){
        alert(arguments[0]*arguments[0]);
    }else{
        alert(arguments[0]+arguments[1]);
    }
}

function f3(){

    var  f = new Function("alert(‘xxx‘);");
    f();
}


function f4(){
    var a = [3,5,6,1,2,5,97,5];
    var f = new Function("x","y","return x-y;");
    a.sort(f);
    alert(a.toString());
}

function f5(){
    var a= [1,5,7,5,3,0,1,9];
    var f = function(x,y){
        return x-y;
    };
    a.sort(f);
    alert(a.toString());
}


function f6(str){
    if(str == "C"){
        document.getElementById("txt10").value=http://www.mamicode.com/null;"="){
            document.getElementById("txt10").value=http://www.mamicode.com/eval(document.getElementById("txt10").value);
        }else{
            document.getElementById("txt10").value = document.getElementById("txt10").value + str;
        }
    }
    
}

function del(){
    return window.confirm("是否删除？");
}













function M3(){
    alert("no no");
    
}
function M4(){
    alert("\u2f3f");
}
function getSquare(){
    var number = document.getElementById("jisuanqi").value;
    if(isNaN(number)){
        alert("enter number")
    }else{
    var n = parseFloat(number);
    alert(n*n);    
    }
    
}
function returnType(){

    var something=true;
    alert(typeof(something));
}

function judgeNumber(){
 var result=100;
 var n=parseInt(document.getElementById("txt1").value);
 alert(n>result?"大了":"小了"); 
}


function replaceString(){
    var str= document.getElementById("txt2").value;
    var r = str.replace("b","*")
    document.getElementById("txt2").value=http://www.mamicode.com/r;"txt3").value=http://www.mamicode.com/document.getElementById("txt3").value.replace(/b/gi,"*");
}

function operteArray(n){
    var array = document.getElementById("txt4").value.split(",");
    switch(n){
            case 1:
                array.reverse();
                break;
            case 2:
                array.sort();
                break;
            case 3:
                break;
    }
    alert(array.join("||"))
    
}

function f1(){
    var minNumber= parseInt(document.getElementById("txt5").value);
    var maxNumber= parseInt(document.getElementById("txt6").value);
    difference=maxNumber-minNumber;
    alert(Math.floor(Math.random()*difference+minNumber));//3-15之间的随机数
}

function check(){
    var str = document.getElementById("txt7").value
    var r =/^[\u4e00-\u9fa5]{2,8}$/;
    if(r.test(str)){
        alert("yes");
        
    }else{
        alert("error");
    }
}

function makedate(){
    var d = new Date();
    document.getElementById("txt8").value=http://www.mamicode.com/d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
}


function makedate2(){
    var d = new Date(document.getElementById("txt8").value);
    alert(d.setDate(d.getDate-3));
}


function olmath(){
    if(arguments.length == 1){
        alert(arguments[0]*arguments[0]);
    }else{
        alert(arguments[0]+arguments[1]);
    }
}

function f3(){

    var  f = new Function("alert(‘xxx‘);");
    f();
}


function f4(){
    var a = [3,5,6,1,2,5,97,5];
    var f = new Function("x","y","return x-y;");
    a.sort(f);
    alert(a.toString());
}

function f5(){
    var a= [1,5,7,5,3,0,1,9];
    var f = function(x,y){
        return x-y;
    };
    a.sort(f);
    alert(a.toString());
}


function f6(str){
    if(str == "C"){
        document.getElementById("txt10").value=http://www.mamicode.com/null;"="){
            document.getElementById("txt10").value=http://www.mamicode.com/eval(document.getElementById("txt10").value);
        }else{
            document.getElementById("txt10").value = document.getElementById("txt10").value + str;
        }
    }
    
}

function del(){
    return window.confirm("是否删除？");
}

function showtime(){
    var d = new Date();
    document.getElementById("showtimetext").value=http://www.mamicode.com/d.toLocaleTimeString();"hi");
    };
    timer1= window.setTimeout(f7,5000);
}


function cancelAlert(){
    window.clearTimeout(timer1);
}
function  testDOM(){
    document.getElementById("txt11").innerHTML="b";
    document.getElementById("txt11").style.color="red";
}
function  testDOM2(){
    document.getElementById("txt12").src="http://www.mamicode.com/img/close.png";
}

function validName(){
    var r = /^[a-zA-z]{5,10}$/;
    var name = document.getElementById("txtName").value;
    var nameInfo = document.getElementById("nameInfo");
    if(r.test(name)){
        nameInfo.innerHTML="格式正确";
        nameInfo.style.color="green";
    }else{
        nameInfo.innerHTML="格式错误";
        nameInfo.style.color="red";
    }
    return r.test(name);
}

function validAge(){
    var r = /^\d{0,3}$/;
    var age = document.getElementById("txtAge").value;
    var ageInfo = document.getElementById("ageInfo");
    if(r.test(age)){
        ageInfo.innerHTML="格式正确";
        ageInfo.style.color="green";
    }else{
        ageInfo.innerHTML="格式错误";
        ageInfo.style.color="red";
    }
    return r.test(age);
}

function validData(){
    return validName()&&validAge();
}
function sub(something){
    var nodes = something.parentNode.childNodes;
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text" &&parseInt(nodes[i].value)>0){
            nodes[i].value=http://www.mamicode.com/parseInt(nodes[i].value)-1;"INPUT" && nodes[i].type == "text" ){
            nodes[i].value=http://www.mamicode.com/parseInt(nodes[i].value)+1;"shopping");
    var rows =table.getElementsByTagName("tr");
    var total = 0;
    for(var i=1;i<rows.length;i++){
         var curRow = rows[i];
         var pric = parseFloat(curRow.getElementsByTagName("td")[1].innerHTML);
         var q = parseInt(curRow.getElementsByTagName("td")[2].getElementsByTagName("input")[1].value);
         var sum = pric * q;
         curRow.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
         total += sum;
    }
    
    document.getElementById("sum").innerHTML = total.toFixed(2);
}


function ab(){
        var a = document.createElement("a");
        a.href="http://www.baidu.com";
        a.innerHTML="百度";
        document.getElementById("form1").appendChild(a);

}
var arrNumber=[[0],[1.1,1.2,1.3],[2.1,2.2,2.3],[3.1,3.2,3.3]]
function showNumber(){
    while(document.getElementById("s2").childNodes.length>0){
        document.getElementById("s2").removeChild(document.getElementById("s2").firstChild);
    }
    var indexNumber =document.getElementById("s1").selectedIndex;
    for(var i =0;i<arrNumber[indexNumber].length;i++){
            var op= document.createElement("option");
            op.innerHTML=arrNumber[indexNumber][i];
            document.getElementById("s2").appendChild(op);
    }
}

function showNumber(){
    document.getElementById("s2").options.length=0;
    for(var i = 0;i<arrNumber[document.getElementById("s1").selectedIndex].length;i++){
        document.getElementById("s2").options[i]=new Option(arrNumber[document.getElementById("s1").selectedIndex][i]);
    }
} 


function addThis(){
    var row = document.createElement("tr");//创建一行
    var col1=document.createElement("td");//创建一个格子
    col1.innerHTML = document.getElementById("spName").value;//赋值
    var col2=document.createElement("td");//创建另外一个格子
    col2.innerHTML = document.getElementById("spPrice").value;//赋值
    row.appendChild(col1);//在行中添加创建的格子
    row.appendChild(col2);//在行中添加创建的格子
    document.getElementById("t2").appendChild(row);//将这一行添加到表中

}

function addThis(){
    var table = document.getElementById("t2");
    var row = table.insertRow(table.rows.length);//添加一行
    var cell1 = row.insertCell(0);//创建一个格子
    var cell2 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("spName").value;
    cell2.innerHTML  = document.getElementById("spPrice").value;
}


function bianli(){//遍历某个对象的属性
    var str = "";
    for(var i in navigator){
        str += i+":" + navigator[i]+"\n"
    }
    alert(str);
}

function cal(eventObj){//firefox   在js中不识别event 需要从HTML中传入
    var obj = eventObj.target||eventObj.srcElement;//IE和firefox 的方式不同 为了兼容性 用这种方式
    if(obj.nodeName == "INPUT" && obj.type == "button"){
        if(obj.value == "="){
            var r = eval(document.getElementById("id1").value);
            document.getElementById("id1").value=http://www.mamicode.com/r;"id1").value += obj.value;
        }
    }
}






本文出自 “浪漫的偷笑” 博客，请务必保留此出处http://lmdtx.blog.51cto.com/6942028/1855679

java web基础1


联系
我们