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个
特殊字符：转义字符
< <
> >
空格
段落标记 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:yellowcss 重复 没有冲突的并集，有冲突的就近远测
优先级都一样的时候最后定义的生效
选择器 谁来使用{}中定义的样式
元素选择器： 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" οnclick="olmath(10);">
<input type="button" value="重载2" οnclick="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个按钮" οnclick="alert('hi');"/>
<input type="button" value="第2个按钮" οnclick="M2();";/>
<input type="button" value="第3个按钮" οnclick="M3();";/>
<input type="button" value="第4个按钮" οnclick="M4();";/>
<input type="text" id="jisuanqi"/>
<input type="button"/ value="计算器" οnclick="getSquare();">
<input type="text" id="txt1" οnblur="judgeNumber();"; />
<input type="text" id="txt2" οnblur="replaceString();"; />
<input type="text" id="txt3" οnblur="replaceString2();"; /><br/>
<input type="text" id="txt4" />
<input type="button" value="反转" οnclick="operteArray(1);"/>
<input type="button" value="排序1" οnclick="operteArray(2);"/>
<input type="button" value="排序2" οnclick="operteArray(3);"/><br/>
<input type="text" id="txt5" />
<input type="text" id="txt6" />
<input type="button" value="随机数" οnclick="f1();"><br/>
姓名:<input type="text" id="txt7" οnblur="check();"/><br/>
<input type="text" id="txt8" style="width:300px"/>
<input type="button" value="日期" οnclick="makedate()" style="width:100px">
<input type="text" id="txt9" style="width:50px"/>
<input type="button" value="日期-1" οnclick="makedate2()"/><br/>
<input type="button" value="重载1" οnclick="olmath(10);">
<input type="button" value="重载2" οnclick="olmath(10,10);">
<input type="button" value="方法1" οnclick="f3();">
<input type="button" value="方法2" οnclick="f4();">
<input type="button" value="方法3" οnclick="f5();"><br/>
<input type="text" id="txt10"><br/>
<table border=1 ><!--表格-->
<tr><!--行-->
<td><input type="button" value="1" οnclick="f6(this.value);"></td><!--格子-->
<td ><input type="button" value="2" οnclick="f6(this.value);"></td>
<td ><input type="button" value="3" οnclick="f6(this.value);"></td>
</tr>
<tr>
<td><input type="button" value="4" οnclick="f6(this.value);"></td>
<td><input type="button" value="5" οnclick="f6(this.value);"></td>
<td><input type="button" value="6" οnclick="f6(this.value);"></td>
</tr>
<tr>
<td><input type="button" value="7" οnclick="f6(this.value);"> </td>
<td><input type="button" value="8" οnclick="f6(this.value);"></td>
<td><input type="button" value="9" οnclick="f6(this.value);"> </td>
</tr>
<tr>
<td><input type="button" value="0" οnclick="f6(this.value);"></td>
<td><input type="button" value="." οnclick="f6(this.value);"></td>
<td><input type="button" value="C" οnclick="f6(this.value);"></td>
</tr>
<tr>
<td><input type="button" value="+" οnclick="f6(this.value);"></td>
<td><input type="button" value="-" οnclick="f6(this.value);"></td>
<td><input type="button" value="=" οnclick="f6(this.value);"></td>
</tr>
</table>
<input type="submit" value="删除" οnclick="return del();"><br/>
<input type="text" id= "showtimetext"/>
<input type="button" οnclick="showtime()" value="显示时间"/>
<input type="button" οnclick="showtime2()" value="时钟"/>
<input type="button" οnclick="showtime3()" value="暂停时钟"/>
<input type="button" οnclick="waitAlert()" value="5s 弹出hi"/>
点击<a href="javascript:cancelAlert();" >取消</a>关闭；
<p id="txt11">a</p>
<input type="button" οnclick="testDOM();" value="a变b">
<img id="txt12" src="img/ok.png"/>
<input type="button" οnclick="testDOM2();" value="对变错">
<p>注册：</p>
用户名：<input type="text" id="txtName" οnblur="validName();"/><span id="nameInfo"> 5-10个英文字母</span><br/>
密码：<input type="text" id="txtAge" οnblur="validAge();"/><span id="ageInfo">3位以内的数字</span><br/>
<input type="submit" value="注册" οnclick="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="-" οnclick="sub(this);"/>
<input type = "text" value="1"/>
<input type = "button" value="+" οnclick="add(this);"/>
</td>
<td>10</td>
</tr>
<tr>
<td>b</td>
<td>20</td>
<td>
<input type = "button" value="-" οnclick="sub(this);"/>
<input type = "text" value="1" />
<input type = "button" value="+" οnclick="add(this);"/>
</td>
<td>20</td>
</tr>
<tr>
<td>c</td>
<td>30</td>
<td>
<input type = "button" value="-" οnclick="sub(this);"/>
<input type = "text" value="1" />
<input type = "button" value="+" οnclick="add(this);"/>
</td>
<td>30</td>
</tr>
</table>
总计：<span id="sum" ></span>
<br/>
<input type="button" value="增加一个超链接" οnclick="ab();">
<br/>
<select id="s1" οnchange="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="增加" οnclick="addThis()">
<table border="1" id="t2">
<tr>
<td>商品名称</td>
<td>商品价格</td>
</tr>
</table>
<br/>
<input type="button" value="遍历" οnclick="bianli();"><br/>
改进版计算器<br/>
<div οnclick="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;
}
}
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
