`
java风
  • 浏览: 57567 次
  • 来自: 北京
社区版块
存档分类
最新评论
  • 泛泛evil: 总结的很好,谢谢分享
    JavaScript
  • wanxkl: 哇!总结的太好了。。凤哥哥,你好强大啊。。请问您跟凤姐什么关系 ...
    css应用

javascript应用1

    博客分类:
  • java
阅读更多

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 = "长度616个字符,由字母,数字组成,区分大小写";

}

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-->
分享到:
评论

相关推荐

    JavaScript实例应用 JavaScript实例应用

    1. **动态网页交互**:JavaScript可以实时更新网页内容,如响应用户的点击事件,动态加载数据,实现下拉菜单、滑动效果等。通过修改DOM(文档对象模型)元素,JavaScript可以改变网页布局和内容。 2. **表单验证**...

    经典的JavaScript应用!

    在这个“经典的JavaScript应用!”的资源包中,我们可能会发现一系列关于JavaScript实践的经典案例和教程,对于学习者和开发者来说,这是一个宝贵的资料库。 首先,JavaScript的核心概念包括变量、数据类型、控制...

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    1. **JavaScript基础**:JavaScript语言的基础包括变量、数据类型、运算符、流程控制(条件语句、循环语句)、函数等。学习JavaScript首先要掌握这些基本语法,为后续的高级特性学习打下坚实基础。 2. **DOM操作**...

    JavaScript应用程序经典实例全书源码

    这本书——"JavaScript应用程序经典实例全书",提供了丰富的实例源码,旨在帮助读者深入理解和应用JavaScript技术。以下是一些可能涵盖的知识点: 1. **基础语法**:JavaScript的基础包括变量声明(var、let、const...

    38种JavaScript应用实例的详解

    38种JavaScript应用实例的详解,包括自动滚屏、页面打开时的百叶窗效果、使用JavaScript传递页面参数、设置指定网页为主页、用JavaScript随机修改页面的标题、在网页中动态添加Script脚本、页面自动刷新、页面的后退...

    javascript实例应用---游戏类.rar

    1. **事件处理**:JavaScript通过监听用户的键盘、鼠标等输入,实时响应游戏中的各种操作。例如,玩家移动角色、点击按钮、触发游戏事件等,都离不开JavaScript的事件处理机制。 2. **动画与游戏循环**:JavaScript...

    JavaScript应用开发实践指南.pdf

    JavaScript应用开发实践指南

    用Javascript搭建企业级web应用

    【Javascript搭建企业级Web应用】 企业级Web应用通常是指那些具备高可用性、可扩展性和安全性的复杂系统,用于支持大型企业的核心业务流程,如CRM(客户关系管理)、ERP(企业资源规划)和物流系统等。这些应用往往...

    javascript应用程序经典实例

    资源名称:Javascript应用程序经典实例   内容简介: 懂得Javascript语法是一回事,能够创建有用的应用程序就是另一回事了。虽然市面上有成打的Javascript图书教你怎么做,但实际上...

    实验六 JavaScript应用

    JavaScript应用 注册验证 列表框内容的添加 加法练习 表格背景 表格行的颜色

    MVC的JavaScript Web富应用开发(完整版)

    通过由浅入深的讲解,你将学会如何构建具有丰富交互以及优雅体验的JavaScript应用,书中同样提供了大量的示例代码,可以帮助你更深入的理解很多重要的概念。 揭开MVC的神秘面纱,教你如何设计合理的架构以及处理...

    用 JSEclipse 构建 JavaScript 应用程序

    使用 JSEclipse,JavaScript 程序员现在有了自己的 Eclipse 插件,该插件将提供许多重要功能来辅助开发 JavaScript 应用程序。像 Eclipse 多年来为 Java™ 语言和其他语言提供了易用性一样,JSEclipse 为 JavaScript...

    基于MVC的JavaScript Web富应用开发

    作者Alex MacCaw,作为一名Ruby/JavaScript程序员,分享了他的见解和经验,这些对于任何想要提升JavaScript应用开发技能的工程师来说,都是非常宝贵的资源。 此外,书中还讨论了软件测试和部署调试,这是确保应用...

    javaScript应用软件javaScript应用软件

    这篇关于“JavaScript应用软件”的讨论将深入探讨JavaScript在实际应用中的各个方面,包括其核心概念、主要用途、框架与库、以及如何利用JavaScript创建各种类型的Web应用程序。 一、JavaScript基础 JavaScript语法...

    JavaScript应用实例-bmob用户验证demo.js

    JavaScript应用实例-bmob用户验证demo.js

    javascript基本语法与应用

    对于 JavaScript,请用“language="JavaScript"”。 参考 相对于标记,还有一个标记。标记所包含的,是服务器端(Server Side)的脚本。本教程只讨论客户器端(Client Side)的 JavaScript,也就是用标记包含的脚本...

    第6节 JavaScript数组及应用.rar

    第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组...

    第7节 JavaScript函数及应用.rar

    第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数...

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码

    掌握变量、数据类型、控制结构、函数、对象和原型链等基本概念是构建任何JavaScript应用的基础。 2. DOM操作:文档对象模型(DOM)是HTML和XML文档的结构表示。JavaScript通过DOM API可以对网页内容进行增删改查,...

    基于MVC的JavaScript Web富应用开发(中文+英文)

    本书《基于MVC的JavaScript Web富应用开发》深入探讨了如何利用MVC(Model-View-Controller)设计模式来构建高效、可维护的JavaScript应用。MVC是一种广泛应用于软件工程的设计模式,尤其在Web开发领域,它有助于...

Global site tag (gtag.js) - Google Analytics