web页面常用功能js实现

 

1.网页未加载时弹出新窗口

<body onunload="window.open('http://www.a68.cn');"></body>

2.浏览网页时鼠标不能点击右键

<body oncontextmenu="window.event.returnValue=false"></body>

3.设置回车键

<form id="myform" action="">

......

<input type="button" id="submit" value="submit" onkeypress="pressEnter()"/>

</form>

js代码：

function pressEnter()

{

if(window.event.keyCode==13) loginnav();

}

参考站点：http://491729.blog.51cto.com/481729/111245

用字符串的length实现限制文本框长度

本例使用JS字符串的length属性来限制一个文本框内文本的长度。大致思路如下：每当用户在文本框内输入值的时候（键盘敲击事件），都触发一个名为check的函数，它会获得文本框内字符的长度，并检查该长度是否在5-10之间。如果不是则给出对应的警告。且当输入字符多余10个的时候会自动去掉长出的部分。

实例JavaScript代码

<script type="text/javascript">function check(){ var str = document.getElementById("test").value; if(str.length < 5){  update("至少输入5个字符！"); }else if(str.length > 10){  update("不能超过10个字符！");  str = str.substring(0,10);  document.getElementById("test").value = str.substring(0,10); }else{  update("有效的用户名。") }}function update(word){ document.getElementById("feedback").innerHTML = word;}</script>HTML代码

<p>  <label for="test">帐号：</label>  <input type="text" name="test" id="test" onkeypress="check()" maxlength="15" />  <span id="feedback"></span></p>

-------------------------------------------------

JavaScript date对象

-------------------------------------------------

<script type="text/javascript"> var today = new Date();

//新建一个Date对象

var todayStr = today.toString(); //把日期转化为字符串

var todayLocal = today.toLocaleString();  //转换为本地字符串(按本地格式化)

var date = today.getDate(); //查询当月日期 得到X天

var day = today.getDay(); //查询当前星期几

var month = today.getMonth(); //查询月份 得到X月

var year = today.getFullYear();//查询年份 得到X年

</script>

JavaScript Date对象应用实例——时钟代码

本代码转自w3schools.com。

<script type="text/javascript">

function startTime(){var today=new Date();

var h=today.getHours();

var m=today.getMinutes();

var s=today.getSeconds();//当数字小于10的时候在前面加一个0

m=checkTime(m);

s=checkTime(s);

document.getElementById('clock').innerHTML=h+":"+m+":"+s;//每隔500毫秒重新执行一次

startTimet=setTimeout('startTime()',500);}

function checkTime(i){if (i<10)  {  i="0" + i;  }return i;}

</script>

9:54:53

时、分、秒

访问时分秒也是十分简单的，小时为getHours，分为getMinutes，秒为getSeconds，还有毫秒getMilliseconds。

today.getHours()

today.getminutes()

today.getSeconds()

today.getMilliseconds()

todaygetTimezoneOffset()  //时差（分钟为单位）

date对象设置（set）方法

设置Date对象的年、月、日等等属性。

只需要使用setDate就可以设置现在是本月的几号。setMonth设置月份，setFullYear是以四位的方式设置年份。setHours设置小时，setMinutes设置分钟，setSeconds设置秒，setMilliseconds则设置毫秒。

JavaScript代码

<script type="text/javascript"> var today = new Date(); //新建一个Date对象 today.setFullYear(1);

today.setMonth(1);

today.setHours(1);

today.setDate(1); t

oday.setMinutes(1);

today.setSeconds(1);

today.setMilliseconds(1);</script>

date对象转换（to）方法:

将Date对象转换为字符串

Date对象的toString方法可以把它转换为字符串，从而可以很方便地显示出来或者是做进一步的处理。点击下面的按钮就可以看到toString的结果了。

today.toString()

更有用的一个方法是toLocaleString，它将Date对象转换成符合本地习惯的字符串。

today.toLocaleString()

toDateString与toLocaleDateString则将Date对象转换为字符串之后只保留日期部分。相对的，toTimeString和toLocaleTimeString则保留时间（时、分、秒）部分。

源代码 (一般浏览器不支持)

toSource方法把Date对象转换为源代码的形式，个人感觉没什么用。

today.toSource()

JavaScript数组

-------------------------------------------------

创建一个JavaScript数组

<script type="text/javascript">

//笨方法

var arr = new Array("HTML","CSS","JavaScript","DOM");

//省事一点的方法

var arr = ["HTML","CSS","JavaScript","DOM"];

</script>

与字符串对象一样，数组也有一个length属性，不过它的意思是数组包含元素的个数。点击下面的按钮可以看到arr的长度为4。

alert(arr.length)

数组join方法

数组对象的join方法可以把数组的几个元素连接成一个字符串。

arr.join()

数组concat方法

数组对象的concat方法可以把两个或者多个数组连接起来，组成一个新的数组。下面是一段使用了concat方法的JS代码。

JavaScript代码

<script type="text/javascript"> var arr = ["HTML","CSS","JavaScript","DOM"]; var arr2 = ["ASP.NET","PHP","J2EE","Python","Ruby"];

var arrNew = arr.concat(arr2);

var arr3 =  ["1","2","3","4"];

var arrNewNew = arr.concat(arr2,arr3);</script>

concat方法也可以接受多个参数。例如， var arrNewNew = arr.concat(arr2,arr3);这个语句将arr与arr2与arr3一起连接成一个新的数组，点击下面的按钮来查看这个新的数组。

arrNewNew

arrNewNew.length

数组sort方法

数组对象的sort方法可以按照一定的顺序把数组元素重新排列起来。通常情况下，都是按照字幕顺序排列。

JavaScript代码

<script type="text/javascript">

var arr = ["HTML","CSS","JavaScript","DOM"];

var arr2 =  [4,3,2,1];

var arr3 =  [40,300,2000,10000];

</script>

实例JavaScript数组代码

下面是一段简单的使用数组的JS代码，可以点击后面的按钮来观察各个变量的值。

<script type="text/javascript">

var arr = new Array("HTML","CSS","JavaScript","DOM");

var arr2 = new Array("ASP.NET","PHP","J2EE","Python","Ruby");

var joinArr = arr.join();

var bigArr = arr.concat(arr2);

var sortArr = bigArr.sort();

</script>

sort方法的参数

sort方法可以接受一个参数，这个参数的类型是函数，它也就是排序函数了。我们可以使用它来进行自定义的排序方式。例如，我们可以让上面的数字数组按照大小的方式排序。看下面的JS代码：

<script type="text/javascript"> var arr3 =  [40,300,2000,10000]; function compare(a,b) {return a - b;}</script>arr3.sort(compare)

点击上面的按钮可以发现，当我们使用自定义的compare函数进行排序的时候，10000这个最大的数字已经顺利地排到最后了。从代码中我们可以观察出来，sort是根据排序函数的返回值是正还是负来排序的。

数组push与pop方法

数组对象的push与pop方法分别在数组的尾部添加与删除元素。push方法有一个参数，也就是要添加到数组尾部的元素，而pop方法则没有参数，而是返回从数组尾部删除的元素。见下面的JS代码。

JavaScript代码

<script type="text/javascript">

var arr = ["HTML","CSS","JavaScript","DOM"];

var arr2 =  [1,2,3,4]; arr.push("PHP");

var popped = arr2.pop();

</script>

数组shift与unshift方法

数组对象的unshift与shift方法分别在数组的头部添加和删除一个元素.

JavaScript代码

<script type="text/javascript">

var arr = ["HTML","CSS","JavaScript","DOM"];

var arr2 =  [1,2,3,4]; arr.unshift("PHP");

var shifted = arr2.shift();

</script>

数组slice方法

数组对象的slice方法从数组中分离出一个子数组，功能类似于字符串对象的substring方法。为了演示方便，我们创建一个值为[0,1,2,3,4,5,6,7,8,9,0]的数组。这样就形成了位置和值的对应，即，arr[0]的值恰好为0。

点击下面的按钮进行测试，可以发现，slice(0,3)会返回[0,1,2]，也就是说，只返回位置0、1和2，而不包括3。由此我们可以知道，传递给slice的两个参数分别为，起始字符的位置，结束字符的位置+1。

与字符串的substring方法类似，数组的slice方法也可以省略第二个参数，表示一直到数组结束。见下面的实例。

arr.slice(3)

arr.slice(3)表示从数组的第三个元素开始，一直到数组结尾的子数组。我们可以推测，arr.slice(0)将会返回数组本身。可以点击下面的按钮验证。

arr.slice(0)

-------------------------------------------------

JavaScript 数学对象

-------------------------------------------------

JavaScript中有专门处理数学问题的Math对象。

实例JavaScript Math代码

<script type="text/javascript"> var num = Math.PI; var rNum = Math.round(num);//四舍五入</script>我们首先吧Math.PI的值保存在num中，这是一个JS内置的常量，可以点击下面的按钮来查看它的值。

alert(num)

rNum则是num经过四舍五入的值。

alert(rNum)

random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮，可以发现得到的数字会不断改变。

random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮，可以发现得到的数字会不断改变。

alert(Math.random())

JavaScript的Math对象计算器

[url]http://www.cainiao8.com/web/js_examples/09_math_jisuqnqi.html[/url]

-------------------------------------------------

用javascript修改html元素的class

-------------------------------------------------

实例JavaScript代码

需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。

<script type="text/javascript">

function over(){

var para = document.getElementById("testPara").className = "testOver";  } function out(){  var para = document.getElementById("testPara").className = "testNormal";  } </script>

HTML代码

本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。

<p id="testPara" class="testNormal" 我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。    </p>

CSS

CSS代码设置了两个测试用的样式。

.testNormal {  border:1px solid black; }.testOver { background:#999999; border:1px solid black;  font-weight:bold;  padding:3em; }

-------------------------------------------------

JavaScript重定向

-------------------------------------------------

使用JavaScript可以将用户导向一个特定的地址，并且不同的方法会对浏览器的历史记录有不同的影响。

实例JavaScript代码

本例定义了两个JavaScript函数，功能都是重定向到首页，但是第一个函数采用的是直接给href赋值的方式，第二个使用的是replace方法。具体请看下面的代码：

<script type="text/javascript"> function goBack(){  location.href = "[url]http://www.cainiao8.com/[/url]"; } function goBackRep(){  location.replace("[url]http://www.cainiao8.com/[/url]"); }</script>

HTML代码

<p> 点击后面的按钮就可以使得页面转向首页，    可以点击浏览器的后退按钮返回本页。    使用的方法是直接给location.href赋值。</p><button return false;" value="重定向到首页"> 重定向到首页</button><p> 点击后面的按钮就同样会跳转到首页，但是 由于是使用location.replace的方法，所以不能 通过浏览器的后退按钮返回本页。</p><button return false;" value="重定向到首页(不能返回)" >

-------------------------------------------------

JavaScript对象当作关联数组

-------------------------------------------------

JavaScript的对象不仅仅可以使用“.propertyName” 来访问对象的属性，也可以使用“[propertyName]”来访问对象的属性。

实例JavaScript代码

使用关联数组的方法访问对象的属性比使用传统的点“.propertyName”要灵活得多。因为我们可以在[]里填入一个变量，而不是必须事先制定好要访问的属性名。例如下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了。

<script type="text/javascript">var d = document.getElementById("content");function setProperty(){ var sel = document.getElementById("selectColor"); var propertyValue = sel.options[sel.selectedIndex].value; var propertyName = document.getElementById("selectColor").name; d.style[propertyName] = propertyValue;}</script>HTML代码

本例的HTML代码比较简单，一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件，调用函数。

<select id="selectColor" name="backgroundColor">    <option value="aqua">aqua</option>    <option value="black">black</option>    <option value="blue">blue</option>    <option value="fuchsia">fuchsia</option>    <option value="gray">gray</option>    <option value="green">green</option>    <option value="lime">lime</option>    <option value="maroon">maroon</option>    <option value="navy">navy</option>    <option value="olive">olive</option>    <option value="purple">purple</option>    <option value="red">red</option>    <option value="silver">silver</option>    <option value="teal">teal</option>    <option value="white">white</option>    <option value="yellow">yellow</option></select> <button return false;">设置背景颜色</button>效果

选择颜色后点击按钮“设置背景颜色”。

160229-01、web页面常用功能js实现的更多相关文章

  1. WEB页面常用基本控件测试用例

    一.树控件的测试外观操作 1)项目中的所有树是否风格一致 2)树结构的默认状态是怎样的.比如默认树是否是展开,是展开几级?  是否有默认的焦点? 默认值是什么?展开的节点图标和颜色? 2.执行操作 1 ...

  2. web网站常用功能测试点总结

    目录 一.输入框 二.搜索功能 三.添加.修改功能 四.删除功能 五.注册.登录模块 六.上传图片测试 七.查询结果列表 八.返回键检查 九.回车键检查 十.刷新键检查 十一.直接URL链接检查 十二 ...

  3. Spring Boot从入门到实战：整合Web项目常用功能

    在Web应用开发过程中,一般都涵盖一些常用功能的实现,如数据库访问.异常处理.消息队列.缓存服务.OSS服务,以及接口日志配置,接口文档生成等.如果每个项目都来一套,则既费力又难以维护.可以通过Spr ...

  4. 【SpringBoot实战】实现WEB的常用功能

    前言 通常在 Web 开发中,会涉及静态资源的访问支持.视图解析器的配置.转换器和格式化器的定制.文件上传下载等功能,甚至还需要考虑到与Web服务器关联的 Servlet相关组件的定制.Spring ...

  5. Spring Boot搭建Web项目常用功能

    搭建WEB项目过程中,哪些点需要注意: 1.技术选型: 前端:freemarker.vue 后端:spring boot.spring mvc 2.如何包装返回统一结构结果数据? 首先要弄清楚为什么要 ...

  6. web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入

    正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...

  7. web 页面间传值 js 封装方法

    用法 var id = getParam("id"); function getParam(strKey) { var url=document.URL; //var url=&q ...

  8. WEB前段（HTML+JS），后端(MYSQL+PHP)开发基础

    一.HTML HTML:超文本标记语言,可以加载JS/CSS/图片/链接等非文字的内容 一切的网页开发技术都需要建立在HTML的基础之上 HTML的结构和语法 HTML元素 注释:  <!-- ...

  9. 将请求挂载至WEB页面

    有两种方式 1.使用标准的方式,在某个菜单下面直接加入标准功能  提交请求(FEM_FWK_SUBMIT_REQ),然后即可在页面上提交请求. 2.将指定请求定义成功能,在WEB页面使用功能直接提交指 ...

随机推荐

  1. PaaS 平台的网络需求

    在使用 Docker 构建 PaaS 平台的过程中,我们首先遇到的问题是需要选择一个满足需求的网络模型: 让每个容器拥有自己的网络栈,特别是独立的 IP 地址 能够进行跨服务器的容器间通讯,同时不依赖 ...

  2. UISCREEN 和支持高分辨率的显示屏

    UIScreen对象包含了整个屏幕的边界矩形.当构造应用的用户界面接口时,你应该使用该对象的属性来获得推荐的矩形大小,用以构造你的程序窗口. CGRect bound = [[UIScreen mai ...

  3. GDB和WinDbg中调用函数

    GDB: 特别简单,直接写调用式子即可,如下图的p word.c_str(),其中word的类型是std::string WinDbg:目前都说是.call命令,说实话我宁愿不用...见: http: ...

  4. 初识STM32固件库

    因为基于 Cortex 系列芯片采用的内核都是相同的,区别主要为核外的片上外设的差异,这些差异却导致软件在同内核,不同外设的芯片上移植困难.为了解决不同的芯片厂商生产的 Cortex 微控制器软件 的 ...

  5. dp之多重背包poj1276

    题意:有现今cash,和n种钱币,每种钱币有ni个,价值为di,求各种钱币组成的不超过cash的最大钱数....... 思路:二进制拆分转化为01背包,或者转化为完全背包都是可以的. 反思:这个题目我 ...

  6. Excel 自定义关闭按钮

    遇到过这样一个需求,是在excel关闭的时候,不要excel本身的保存窗口,只用自定义的. 这个的需要第一,是点击关闭时候触发, 第二:触发后,不能还是弹出那个窗口 第三:取消后,要能停止程序 为了弄 ...

  7. 怎样实时判断socket连接状态？

    对端正常close socket,或者进程退出(正常退出或崩溃),对端系统正常关闭 这种情况下,协议栈会走正常的关闭状态转移,使用epoll的话,一般要判断如下几个情况 处理可读事件时,在循环read ...

  8. SDRAM基础

    一． 介绍 存储器的最初结构为线性,它在任何时刻,地址线中都只能有一位有效.设容量为N×M的存储器有S0-Sn-1条地址线:当容量增大时,地址选择线的条数也要线性增多,利用地址译码虽然可有效地减少地址 ...

  9. 【BZOJ】1031: [JSOI2007]字符加密Cipher（后缀数组）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1031 很容易想到这就是将字符串复制到自己末尾然后后缀数组搞出sa然后按区间输出即可. 然后换了下模板 ...

  10. git fork同步是什么意思？

    这篇文章主要介绍了git fork同步是什么意思?fork到了哪里?有什么用?怎样用?跟clone有什么差别?本文就一一解释这些问题,须要的朋友能够參考下 官方文档:http://help.githu ...