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" class="aaa">
康菲公司称渤海湾溢油量超过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-->