javascript应用1

java风

浏览: 57432 次
来自: 北京

最近访客更多访客>>

bdpy9864

bemchou89

CRH2016

cqdtb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

javascript

javascript

{<!--

1.javascript是严格区分大小写的语言

2.javascript变量是没有类型数据是有类型的或者说变量的要根据数据来定

3.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：{

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>

</body>

}

页面显示时钟：｛

function testMethod(){

var date = new Date();

document.getElementById("shizhong").innerHTML = date.toLocaleString();

setTimeout("testMethod()",1000);

}

Web学习网址：http://www.w3school.com.cn

｝

收件箱：{

* 验证的是是否有选中的复选按钮

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>

<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>

</form>

</body>

}

验证码的产生：{

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>

</div>

<hr>

</body>

}

获取表单：{

* 获取表单的方法

* 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>

<hr>

邮箱 :

密码 :

</form>

<hr>

</body>

}

获取表单域：{

* 获取表单域的方法

* 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>

邮箱 :

密码 :

</form>

<hr>

</body>

}

单个表单域的验证：{

<!--

单个表单域的验证(校验)目的：提升用户的体验效果

整体表单的验证(校验) 目的：减轻对服务器的访问次数

-->

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>

邮箱 :

昵称 :

密码 :

重复密码 :

<hr>

<b>设置密码保护问题</b>

</div>

<hr>

密码保护问题1:<select name="question1">

<option value="002">您母亲的姓名</option>

<option value="003">您父亲的姓名</option>

</optgroup>

<option value="005">您母亲的生日</option>

<option value="006">您父亲的生日</option>

</optgroup>

</select>

<br>

您的答案：

</div>

</form>

</body>

}

表单的整体验证：{

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>

邮箱：<input type="text" name="email"/>

<option value="over">请选择邮箱类型</option>

<option value="4">@gmail.com</option>

</select>

密码：

</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：{

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>

.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>

京沪高铁昨日再发两起故障专题 <br>

国务院：二三线城市房价猛涨须限购 <br>

红基会否认捐赠设备报价造假

</div>

康菲公司称渤海湾溢油量超过1500桶山东索赔或超2亿 <br>

陕西城固“法制培训班”被指饿死上访人 <br>

上海工商：达芬奇家居涉虚假宣传等问题

</div>

<hr>

<hr>

</body>

}

分享到：

javascript应用2 | css应用

2011-09-10 15:00
浏览 972
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论