码迷，mamicode.com
首页 > 编程语言 > 详细

java web基础1

时间：2016-09-23 15:19:56      阅读：159      评论：0      收藏：0      [点我收藏+]

标签：单引号   java   双引号   主题   动态   

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="URL"/>
            <img src="./img/1.jpg"/ width=222>

    

   超链接

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


   同一页面的不同位置

    回到页面的顶端

        <a href="#">top</a><!--固定的写法-->

    

   锚点

<a name="a1">hi</a>
<a href="#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="123"/><br/>
			pwd:<input type="text" name="p" value="123"/><br/>
			sex:<input type="radio" name="sex" value=1/>M
				<input type="radio" name="sex" value=0/>F<br/>
			role:<fieldset>
				<legend>二选一</legend>
				<input id="r1" type="checkbox" name="role" value="root" />
				<label for="r1">root</label><br/>
				<input id="c1"type="checkbox" name="role" value="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="增加"/>
			<input type="reset" value="重置"/>
		</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="123"/><br/>
			pwd:<input type="text" name="p" value="123"/><br/>
			sex:<input type="radio" name="sex" value=1/>M
				<input type="radio" name="sex" value=0/>F<br/>
			role:<fieldset>
				<legend>二选一</legend>
				<input id="r1" type="checkbox" name="role" value="root" />
				<label for="r1">root</label><br/>
				<input id="c1"type="checkbox" name="role" value="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="./3.html"></iframe>
			<iframe src="http://baidu.com"></iframe>
			<input type="submit" value="增加"/>
			<input type="reset" value="重置"/>
		</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="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="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="重载1" onclick="olmath(10);">
    <input type="button" value="重载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="js1.js" type="text/javascript" language="javascript"></script>
    </head>
    
    
    <body>
        <form id="form1">
            <input type="button" value="第1个按钮" onclick="alert(‘hi‘);"/>
            <input type="button" value="第2个按钮" onclick="M2();";/>
            <input type="button" value="第3个按钮" onclick="M3();";/>
            <input type="button" value="第4个按钮" onclick="M4();";/>
            <input type="text" id="jisuanqi"/>
            <input type="button"/ value="计算器" 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="反转" onclick="operteArray(1);"/>
            <input type="button" value="排序1" onclick="operteArray(2);"/>
            <input type="button" value="排序2" onclick="operteArray(3);"/><br/>
            <input type="text" id="txt5" />
            <input type="text" id="txt6" />
            <input type="button" value="随机数" onclick="f1();"><br/>
            姓名:<input type="text" id="txt7" onblur="check();"/><br/>
            <input type="text" id="txt8" style="width:300px"/>
            <input type="button" value="日期" onclick="makedate()" style="width:100px">
            <input type="text" id="txt9" style="width:50px"/>
            <input type="button" value="日期-1" onclick="makedate2()"/><br/>
            
            <input type="button" value="重载1" onclick="olmath(10);">
            <input type="button" value="重载2" onclick="olmath(10,10);">
            <input type="button" value="方法1" onclick="f3();">
            <input type="button" value="方法2" onclick="f4();">
            <input type="button" value="方法3" onclick="f5();"><br/>
            
            
            <input type="text" id="txt10"><br/>

            <table  border=1 ><!--表格-->
                <tr><!--行-->
                    <td><input type="button" value="1" onclick="f6(this.value);"></td><!--格子-->
                    <td ><input type="button" value="2" onclick="f6(this.value);"></td>
                    <td ><input type="button" value="3" onclick="f6(this.value);"></td>
                </tr>
                <tr>
                    <td><input type="button" value="4" onclick="f6(this.value);"></td>
                    <td><input type="button" value="5" onclick="f6(this.value);"></td>
                    <td><input type="button" value="6" onclick="f6(this.value);"></td>
                </tr>
                <tr>
                    <td><input type="button" value="7" onclick="f6(this.value);">    </td>
                    <td><input type="button" value="8" onclick="f6(this.value);"></td>
                    <td><input type="button" value="9" onclick="f6(this.value);">    </td>
                </tr>
                <tr>
                    <td><input type="button" value="0" onclick="f6(this.value);"></td>
                    <td><input type="button" value="." onclick="f6(this.value);"></td>
                    <td><input type="button" value="C" onclick="f6(this.value);"></td>
                    
                </tr>
                <tr>
                    <td><input type="button" value="+" onclick="f6(this.value);"></td>
                    <td><input type="button" value="-" onclick="f6(this.value);"></td>
                    <td><input type="button" value="=" onclick="f6(this.value);"></td>                
                </tr>
            </table>
            
            <input type="submit"  value="删除" onclick="return del();"><br/>
            
            
            <input type="text" id= "showtimetext"/>
            <input type="button" onclick="showtime()" value="显示时间"/>
            <input type="button" onclick="showtime2()" value="时钟"/>
            <input type="button" onclick="showtime3()" value="暂停时钟"/>
            <input type="button" onclick="waitAlert()" value="5s 弹出hi"/>
            点击<a href="javascript:cancelAlert();" >取消</a>关闭；
            <p id="txt11">a</p>
            <input type="button" onclick="testDOM();" value="a变b">
            <img id="txt12" src="img/ok.png"/>
            <input type="button" onclick="testDOM2();" value="对变错">
            
            <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="注册" 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="-" onclick="sub(this);"/>
                        <input type = "text"  value="1"/>
                        <input type = "button" value="+" onclick="add(this);"/>
                    </td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td>20</td>
                    <td>
                    <input type = "button" value="-" onclick="sub(this);"/>
                        <input type = "text" value="1" />
                        <input type = "button" value="+" onclick="add(this);"/>
                    </td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>30</td>
                    <td>
                    <input type = "button" value="-" onclick="sub(this);"/>
                        <input type = "text" value="1" />
                        <input type = "button" value="+" onclick="add(this);"/>
                    </td>
                    <td>30</td>
                </tr>
            </table>
            总计：<span id="sum" ></span>
            <br/>
            
            
            <input  type="button"  value="增加一个超链接" 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="增加" onclick="addThis()">
            <table border="1" id="t2">
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                </tr>
            </table>
            <br/>
            <input type="button" value="遍历" onclick="bianli();"><br/>
            改进版计算器<br/>
            <div  onclick="cal(event);">
                <input type="button" value="1"/>
                <input type="button" value="2"/>
                <input type="button" value="3"/>
                <input type="button" value="+"/>
                <input type="button" value="-"/>
                <input type="button" value="="/>
                <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=r;
}

function replaceString2(){
    document.getElementById("txt3").value=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=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=null;
    }else{
        if( str == "="){
            document.getElementById("txt10").value=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=r;
}

function replaceString2(){
    document.getElementById("txt3").value=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=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=null;
    }else{
        if( str == "="){
            document.getElementById("txt10").value=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=d.toLocaleTimeString();
}
var timer;
function showtime2(){
     timer = window.setInterval(showtime,1000);
}

function showtime3(){
    window.clearInterval(timer);
}

var timer1;
function waitAlert(){
    var f7= function(){
        alert("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="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=parseInt(nodes[i].value)-1;
        }
    }
    calTotal();
}

function add(something){
    var nodes = something.parentNode.childNodes;
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text" ){
            nodes[i].value=parseInt(nodes[i].value)+1;
        }
    }
    calTotal();
}

function calTotal(){
    var table = document.getElementById("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=r;
        }else{
            document.getElementById("id1").value += obj.value;
        }
    }
}






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

java web基础1

标签：单引号   java   双引号   主题   动态   

原文地址：http://lmdtx.blog.51cto.com/6942028/1855679
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！