javascript应用1
javascript
{<!--?
???? 1.javascript是严格区分大小写的语言
???? 2.javascript变量是没有类型?数据是有类型的??或者说变量的要根据数据来定
???? 3.javascript不能使用未经声明的变量
?????-->
<script?type="text/javascript">
/*var?first;
var?second?=?null;
var?third?=?true;
var?fourth?=?155;
var?fifth?=?155.99;
var?sixth?=?"大家好";
var?person?=?{age:18,name:"嚣张",passwd:'888888'};?
//alert(aaaa);不能使用未经声明的变量
alert(first);
alert(second);
alert(third);
alert(fourth);
alert(fifth);
alert(sixth);
alert(person.name);
alert(person.passwd);
alert(person.age);
var?strs?=?new?Array();
strs[0]?=?"李世民";
strs[1]?=?"李白";
strs[2]?=?"李小龙";
strs[3]?=?"李连杰";
strs[4]?=?"李冰冰";
strs[5]?=?"李清照";
if(strs.length?<?1){
alert("数组是空的");
}else{
for(var?i?=?0;?i?<?strs.length?;?i++){
alert(strs[i]);
}
}*/
var?first?=?"199";
var?second?=?199;
//单等号(=)是赋值??
//双等号(==)是判断是否相等?非严格相等?即不考虑类型?只考虑值
//三等号(===)判断是否严格相等
if(first?==?second){
alert("他们是相等的");
}else{
alert("他们是不等的");
}
if(first?===?second){
alert("他们严格相等的");
}else{
alert("他们严格意义上是不等的");
}
</script>
}
function：{
??<script?type="text/javascript">
var?first?=?"全局变量";
/*
?*?1.函数以关键字function定义
?*?2.函数名上不要写返回值的类型???但是函数是有返回值?直接return返回值即可
?*?3.括号中式参数的列表??注意：参数的定义不要加var
?*/
function?testMethod(){
//return?obj+obj1;
var?second?=?"局部变量";
third?=?"这是什么";//对于不加var的局部变量?当它执行后就变成了全局的变量??注意?不要这么定义
alert(first);
alert(second);
alert(third);
}
function?firstMethod(){
alert(first);
alert(third);
}
/*
?*?javascript获取页面中表单域的value属性值时??都是字符串类型
?*/
?
function?testFunction(){
/*var?first?=?"155";
var?second?=?"165";
var?total?=?parseFloat(first)+parseFloat(second);
alert("结果为："+total);
var?str?=?"154512a4";
if(isNaN(str)){
alert("不是一个数字");
}else{
alert("是一个数字");
}
var?first?=?"打到小岛国";
alert("未经转换的"?+?first);
first?=?escape(first);
alert("转换后的"?+?first);
first?=?unescape(first);
alert("转换回来的"?+?first);*/
var?str?=?"var?aaa?=?'fafafa';";
eval(str);
//eval(str)就是执行str?其中str是对应的javascript的代码
alert(aaa);
}
</script>
??</head>
??
??<body>
?? <input?type="button"?value="测试1"?onclick="testMethod()">
?? <input?type="button"?value="测试2"?onclick="firstMethod()">
?? <input?type="button"?value="测试内部函数"?onclick="testFunction()">
??</body>
}
页面显示时钟：｛
???function?testMethod(){
var?date?=?new?Date();
document.getElementById("shizhong").innerHTML?=?date.toLocaleString();
setTimeout("testMethod()",1000);
???}
Web学习网址：http://www.w3school.com.cn
｝
收件箱：{
??<script?type="text/javascript">
/*
?*?验证的是是否有选中的复选按钮
?*/
function?checkForm(){
var?flag?=?false;
var?emails?=?document.getElementsByName("email");
for?(?var?i?=?0;?i?<?emails.length;?i++)?{
if(emails[i].checked){
flag?=?true;
break;
}
}
if(!flag){
alert("请至少选中一封要删除的邮件");
}else{
flag?=?confirm("删除后不能恢复,确认删除?");
}
return?flag;
}
function?selectAll(){
var?strs?=?document.getElementsByName("email");
for?(?var?i?=?0;?i?<?strs.length;?i++)?{
strs[i].checked?=?true;
}
}
function?cancelAll(){
var?strs?=?document.getElementsByName("email");
for?(?var?i?=?0;?i?<?strs.length;?i++)?{
strs[i].checked?=?false;
}
}
function?selectOthers(){
var?strs?=?document.getElementsByName("email");
for?(?var?i?=?0;?i?<?strs.length;?i++)?{
strs[i].checked?=?!strs[i].checked;
}
}
</script>
??</head>
??
??<body>
?? <form?action="testdate.html"?method="post"?onsubmit="return?checkForm()">
?? <input?type="checkbox"?name="email"?value="0"/>今天某地发生了黄色预警??要有暴雨天气
?? <br>
?? <input?type="checkbox"?name="email"?value="1"/>深圳也发生了电梯逆转现象?导致3人轻伤
?? <br>
?? <input?type="checkbox"?name="email"?value="2"/>有些同学太过于放松自己了???需要自觉些<br>
?? <input?type="checkbox"?name="email"?value="3"/>中国的军事力量争取早日达到世界第一的水平
?? <br>
?? <input?type="checkbox"?name="email"?value="4"/>使用者无法调整分割网页的大小
?? <br>
?? <input?type="checkbox"?name="email"?value="5"/>若窗口名称不存在则打开一个新窗口
?? <hr>
?? ----<a?href="javascript:void(0)"?onclick="selectAll()">全选</a>----
?? <a?href="javascript:void(0)"?onclick="selectOthers()">反选</a>----
?? <a?href="javascript:void(0)"?onclick="cancelAll()">取消</a>----
?? <hr>
?? <input?type="submit"?value="删除"/>
?? <input?type="submit"?value="彻底删除"/>
?? </form>
??</body>
}
验证码的产生：{
??<script?type="text/javascript">
function?testMethod(){
var?date?=?new?Date();
document.getElementById("first").innerHTML?=?date.toLocaleString();
setTimeout("testMethod()",1000);
}//页面显示时钟
function?testCreateRand(){
var?str?=?"0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,G,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
var?strs?=?str.split(",");
var?rand?=?"";
for?(?var?i?=?0;?i?<?4;?i++)?{
var?aaa?=?Math.floor(Math.random()*strs.length);
rand?+=?strs[aaa];
}
alert("产生的随机验证码为："?+?rand);
}//验证码的产生
function?testConfirm(){
//prompt("请输入密码","");
if(confirm("删除后不能恢复,确认删除?")){
alert("已经删除");
}else{
alert("取消删除");
}
}//confirm
</script>
??</head>
??
??<body?onload="testMethod()">
<div?align="center"?id="first"?style="color:?green;font-size:?35px;font-weight:?bold;">
</div>
<input?type="button"?value="模拟验证码的产生"?onclick="testCreateRand()">
<hr>
<input?type="button"?value="删除"?onclick="testConfirm()"/>
??</body>
}
获取表单：{
???<script?type="text/javascript">
/*
?*?获取表单的方法
?*?1.首先通过document.forms得到页面中所有表单组成的表单数组??然后通过要获取表单的索引位置来获取即可
?*?2.首先通过document.forms得到页面中所有表单组成的表单数组??然后通过要获取表单的name属性值来获取
?*?3.直接通过document.要获取表单的name属性值来获取指定表单
?*?4.直接通过要获取表单的name属性值来获取指定表单
?*?5.通过id属性来获取指定的表单域??方法是?document.getElementById(id);
?*/
function?testGetForm(){
//var?second?=?document.forms[1];//第一种获取表单的方式
//var?second?=?document.forms["secondForm"];//第二种获取表单方式
//var?second?=?document.firstForm;//第三种获取表单的方式
//alert(secondForm.action);//第四种获取表单的方式
var?first?=?document.getElementById("firstForm");
alert(first.action);
}
function?testGetElement(){
var?second?=?document.getElementById("secondForm");
var?strs?=?second.elements;//得到的该表单下所有表单域
for?(?var?i?=?0;?i?<?strs.length;?i++)?{
alert(strs[i].value);
}
}
</script>
??</head>
??
??<body>
<form?action="http://www.baidu.com"?method="get"?name="firstForm"?id="firstForm">
邮箱?:
<input?type="text"?name="baiemail"/><br>
密码?:
<input?type="password"?name="baipwd"/><br>
<input?type="submit"?value="登录百度"/>
</form>
<hr>
<form?action="http://www.google.com"?method="post"?name="secondForm"?id="secondForm">
邮箱?:
<input?type="text"?name="googleemail"/><br>
密码?:
<input?type="password"?name="googlepwd"/><br>
<input?type="submit"?value="登录百度"/>
</form>
<hr>
<input?type="button"?value="测试"?onclick="testGetForm()">
<input?type="button"?value="测试2"?onclick="testGetElement()">
??</body>
}
获取表单域：{
??<script?type="text/javascript">
/*
?*?获取表单域的方法
?*?1.首先获取该表单域所在的表单对象??然后通过该表单的elements属性来获取所有表单域??最后通过该表单域的索引位置得到
?*?2.首先获取该表单域所在的表单对象??然后通过该表单的elements属性来获取所有表单域??最后通过该表单域的name属性值得到
?*?3.首先获取该表单域所在的表单对象??然后通过该表单域的name属性值直接获取
?*?4.直接通过id属性值来获取指定的表单域
?*/
function?testGetInput(){
//var?email?=?document.firstForm.elements[0];//第一种方式
//var?email?=?document.firstForm.elements["email"];//第二种方式
//var?email?=?document.firstForm.email;//第三种方式
var?email?=?document.getElementById("email");
alert(email.value);
}
function?welcomeHere(){
document.getElementById("email").focus();
}
function?checkAll(){
var?flag?=?true;
var?email?=?document.getElementById("email").value;
var?pwd?=?document.getElementById("pwd").value;
if(email?==?""){
flag?=?false;
alert("邮箱是必填的");
}
if(pwd?==?""){
flag?=?false;
alert("密码是必填的");
}
if(!flag){
document.getElementById("sub").disabled?=?true;
setTimeout("changeSub()",5000);
}
return?flag;
}
function?changeSub(){
document.getElementById("sub").disabled?=?false;
}
</script>
??</head>
??
??<body?onload="welcomeHere()">
?? <!--?整体表单的验证??要求?只要有一个不符合要求?表单不能提交??此时将用户的提交按钮置为灰色的?5秒钟?????然后5秒后可以重新点击提交按钮?-->
<form?action="http://www.baidu.com"?method="get"?name="firstForm"?id="firstForm"?onsubmit="return?checkAll()">
邮箱?:
<input?type="text"?name="email"?id="email"/><br>
密码?:
<input?type="password"?name="pwd"?id="pwd"/><br>
<input?type="submit"?value="登录百度"?id="sub"/>
</form>
<hr>
<input?type="button"?value="测试"?onclick="testGetInput()">
??</body>
}
单个表单域的验证：{
???<!--?
???? 单个表单域的验证(校验)目的：提升用户的体验效果
???? 整体表单的验证(校验)?目的：减轻对服务器的访问次数
?????-->
???<script?type="text/javascript"?src="../js/CommonsUtil.js"></script>
????<script?type="text/javascript">
???? function?changeDisplay(){
var?question?=?document.getElementById("question");
var?str?=?question.style.display;
if(str?==?"none"){
question.style.display?=?"block";
}else{
question.style.display?=?"none";
}
}
function?writeEach(obj){
var?message?=?"";
var?spanID?=?obj?+?"Error";
if(obj?==?"email"){
message?=?"请输入常用邮箱，方便日后找回密码";
}
if(obj?==?"nickname"){
message?=?"长度不超过10个英文字母或者5个汉字";
}
if(obj?==?"pwd"){
message?=?"长度6到16个字符,由字母,数字组成,区分大小写";
}
if(obj?==?"confirm"){
message?=?"请输入确认密码";
}
document.getElementById(spanID).innerHTML?=?message;
}
function?checkEach(obj,obj1){
var?message?=?"<img?src='../images/right.jpg'/>";
var?spanID?=?obj?+?"Error";
obj1?=?trim(obj1);
if(obj?==?"email"?&&?obj1?==?""){
message?=?"<img?src='../images/wrong.jpg'/><b?style='color:red'>请填写邮箱</b>";
}else?if(obj?==?"email"?&&?!isEmail(obj1)){
message?=?"<img?src='../images/wrong.jpg'/><b?style='color:red'>邮箱格式不正确</b>";
}
if(obj?==?"nickname"?&&?obj1?==?""){
message?=?"<img?src='../images/wrong.jpg'/><b?style='color:red'>请填写昵称</b>";
}
document.getElementById(spanID).innerHTML?=?message;
}
????</script>
??</head>
??
??<body>
<form?action=""?method="post">
邮箱?:
<input?type="text"?name="email"?id="email"?onfocus="writeEach(this.id)"?onblur="checkEach(this.id,this.value)"/><span?id="emailError"></span><br>
昵称?:
<input?type="text"?name="nickname"?id="nickname"?onfocus="writeEach(this.id)"?onblur="checkEach(this.id,this.value)"/><span?id="nicknameError"></span><br>
密码?:
<input?type="password"?name="pwd"?id="pwd"?onfocus="writeEach(this.id)"?onblur="checkEach(this.id,this.value)"/><span?id="pwdError"></span><br>
重复密码?:
<input?type="password"?name="confirm"?id="confirm"?onfocus="writeEach(this.id)"?onblur="checkEach(this.id,this.value)"/><span?id="confirmError"></span><br>
<hr>
<div?style="background-color:#999999?">
<b>设置密码保护问题</b>
<input?type="button"?value="展开或者收起"?onclick="changeDisplay()">
</div>
<hr>
<div?id="question"?style="display:?none">
密码保护问题1:<select?name="question1">
<optgroup?label="姓名">
<option?value="001">您的姓名</option>
<option?value="002">您母亲的姓名</option>
<option?value="003">您父亲的姓名</option>
</optgroup>
<optgroup?label="生日">
<option?value="004">您的生日</option>
<option?value="005">您母亲的生日</option>
<option?value="006">您父亲的生日</option>
</optgroup>
</select>
<br>
您的答案：
<input?type="text"?name="answer1"?id="answer1"/>?
</div>
<input?type="submit"?value="注册新用户"/>
</form>
??</body>
}
表单的整体验证：{
??<script?type="text/javascript">
function?changeAction(obj){
var?form?=?document.emailForm;
var?message?=?"";
if(obj?==?0){
message?=?"http://www.sina.com";
}
if(obj?==?1){
message?=?"http://www.163.com";
}
if(obj?==?2){
message?=?"http://www.126.com";
}
if(obj?==?3){
message?=?"http://www.sohu.com";
}
if(obj?==?4){
message?=?"http://www.google.com";
}
form.action?=?message;
}
/*
?*?表单的整体验证(校验)?:即验证用户输入表单中表单域的值是否符合规定??有一个没有通过验证的?都不能提交当前表单
?*/
function?checkForm(){
var?strs?=?document.emailForm.elements;
var?email?=?strs[0].value;
var?emailtype?=?strs[1].value;
var?pwd?=?strs[2].value;
var?flag?=?true;
if(email?==?""){
alert("请输入邮箱");
flag?=?false;
}
if(emailtype?==?"over"){
alert("请选择邮箱类型");
flag?=?false;
}
if(pwd?==?""){
alert("请输入密码");
flag?=?false;
}
if(flag){
document.emailForm.submit();
}
}
function?checkAll(){
var?flag?=?true;
var?strs?=?document.emailForm.elements;
var?email?=?strs[0].value;
var?emailtype?=?strs[1].value;
var?pwd?=?strs[2].value;
if(email?==?""){
alert("请输入邮箱");
flag?=?false;
}
if(emailtype?==?"over"){
alert("请选择邮箱类型");
flag?=?false;
}
if(pwd?==?""){
alert("请输入密码");
flag?=?false;
}
return?flag;
}
</script>
??</head>
??
??<body>
????<form?action=""?method="post"?name="emailForm"?onsubmit="return?checkAll()">
邮箱：<input?type="text"?name="email"/>
<select?name="type"?onchange="changeAction(this.value)">
<option?value="over">请选择邮箱类型</option>
<option?value="0">@sina.com</option>
<option?value="1">@163.com</option>
<option?value="2">@126.com</option>
<option?value="3">@sohu.com</option>
<option?value="4">@gmail.com</option>
</select>
密码?：
<input?type="password"?name="pwd">
<!--?<input?type="button"?value="登录"?onclick="checkForm()">?-->
<input?type="submit"?value="登录"/>
</form>
??</body>
}
去空格和邮箱验证：{
??/**
?*?@param?obj?:要去掉首尾空格的字符串
?*?@return?返回去掉空格后的字符串
?*?@function?去掉指定字符串的首尾空格
?*/
function?trim(obj){
return?obj.replace(/^\s+|\s+$/g,?"");
}
/**
?*?@param?obj?要验证的邮箱
?*?@return?返回true代表格式正确?false代表格式错误
?*/
function?isEmail(obj){
var?reg?=?/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
????return?reg.test(obj);
}
}
改变CSS：{
??<script?type="text/javascript">
function?testMethod(){
var?div?=?document.getElementById("first");
div.style.color?=?"green";
div.style.fontSize?=?"50px";
}
function?firstMethod(){
var?div?=?document.getElementById("second");
div.className?=?"bbb";
}
function?testChangeColor(obj){
var?str?=?"";
if(obj?==?0){
str?=?"blue";
}
if(obj?==?1){
str?=?"green";
}
if(obj?==?2){
str?=?"red";
}
if(obj?==?3){
str?=?"orange";
}
//document.getElementById("second").className?=?str;
document.getElementById("second").style.backgroundColor?=?str;
}
</script>
<style?type="text/css">
.aaa?{
font-size:?25px;
font-weight:?bold;
background-color:?blue;
color:?yellow;
}
.bbb?{
font-size:?50px;
font-weight:?bold;
background-color:?olive;
color:?green;
}
.blue{
background-color:?blue;
color:?white;
font-size:?25px;
font-weight:?bold;
}
.green{
background-color:?green;
color:?blue;
font-size:?25px;
font-weight:?bold;
}
.red{
background-color:?red;
color:?black;
font-size:?25px;
font-weight:?bold;
}
.orange{
background-color:?orange;
color:?black;
font-size:?25px;
font-weight:?bold;
}
</style>
??</head>
??
??<body>
?? <div?id="first"?style="color:?red;font-size:?20px;">
?? 京沪高铁昨日再发两起故障?专题?<br>
国务院：二三线城市房价猛涨须限购?<br>
红基会否认捐赠设备报价造假?
?? </div>
?? <div?id="second"?style="margin-top: 0pt; margin-bottom: 0pt;">?? 康菲公司称渤海湾溢油量超过1500桶?山东索赔或超2亿?<br>
?? 陕西城固“法制培训班”被指饿死上访人?<br>
?? 上海工商：达芬奇家居涉虚假宣传等问题?
?? </div>
?? <hr>
?? <input?type="button"?value="测试1"?onclick="testMethod()">
?? <input?type="button"?value="测试2"?onclick="firstMethod()">
?? <hr>
?? <a?href="javascript:void(0)"?onclick="testChangeColor(0)">蓝色</a>
?? <a?href="javascript:void(0)"?onclick="testChangeColor(1)">绿色</a>
?? <a?href="javascript:void(0)"?onclick="testChangeColor(2)">红色</a>
?? <a?href="javascript:void(0)"?onclick="testChangeColor(3)">橘红色</a>
??</body>
}
<!--EndFragment-->