160229-01、web页面常用功能js实现
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实现的更多相关文章
- WEB页面常用基本控件测试用例
一.树控件的测试外观操作 1)项目中的所有树是否风格一致 2)树结构的默认状态是怎样的.比如默认树是否是展开,是展开几级? 是否有默认的焦点? 默认值是什么?展开的节点图标和颜色? 2.执行操作 1 ...
- web网站常用功能测试点总结
目录 一.输入框 二.搜索功能 三.添加.修改功能 四.删除功能 五.注册.登录模块 六.上传图片测试 七.查询结果列表 八.返回键检查 九.回车键检查 十.刷新键检查 十一.直接URL链接检查 十二 ...
- Spring Boot从入门到实战:整合Web项目常用功能
在Web应用开发过程中,一般都涵盖一些常用功能的实现,如数据库访问.异常处理.消息队列.缓存服务.OSS服务,以及接口日志配置,接口文档生成等.如果每个项目都来一套,则既费力又难以维护.可以通过Spr ...
- 【SpringBoot实战】实现WEB的常用功能
前言 通常在 Web 开发中,会涉及静态资源的访问支持.视图解析器的配置.转换器和格式化器的定制.文件上传下载等功能,甚至还需要考虑到与Web服务器关联的 Servlet相关组件的定制.Spring ...
- Spring Boot搭建Web项目常用功能
搭建WEB项目过程中,哪些点需要注意: 1.技术选型: 前端:freemarker.vue 后端:spring boot.spring mvc 2.如何包装返回统一结构结果数据? 首先要弄清楚为什么要 ...
- web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入
正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...
- web 页面间传值 js 封装方法
用法 var id = getParam("id"); function getParam(strKey) { var url=document.URL; //var url=&q ...
- WEB前段(HTML+JS),后端(MYSQL+PHP)开发基础
一.HTML HTML:超文本标记语言,可以加载JS/CSS/图片/链接等非文字的内容 一切的网页开发技术都需要建立在HTML的基础之上 HTML的结构和语法 HTML元素 注释: <!-- ...
- 将请求挂载至WEB页面
有两种方式 1.使用标准的方式,在某个菜单下面直接加入标准功能 提交请求(FEM_FWK_SUBMIT_REQ),然后即可在页面上提交请求. 2.将指定请求定义成功能,在WEB页面使用功能直接提交指 ...
随机推荐
- 常用maven 仓库地址
maven下载jar的时候会去寻国外的地址,因此造成了下载jar很缓慢,影响开发效率,于是就出现maven镜像地址,可以使我们开发人员迅速下载相关的jar. 在maven的config的setting ...
- Flume 中文入门手冊
原文:https://cwiki.apache.org/confluence/display/FLUME/Getting+Started 什么是 Flume NG? Flume NG 旨在比起 Flu ...
- zookeeper是如何选取主leader的?
以一个简单的例子来说明整个选举的过程.假设有五台服务器组成的zookeeper集群,它们的id从1-5,同时它们都是最新启动的,也就是没有历史数据,在存放数据量这一点上,都是一样的.假设这些服务器依序 ...
- 手把手教做Excel直方图
手把手教做Excel直方图 2017-10-05 作者:ExcelHome 阅读:71968次 直方图是用于展示数据的分组分布状态的一种图形,用矩形的宽度和高度表示频数分布,通过直方图,用户可 ...
- jquery filter和not
jQuery filter() 方法 filter() 方法允许您规定一个标准.不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回. 下面的例子返回带有类名 "intro" ...
- Android——布局(线性布局linearLayout,表格布局TableLayout,帧布局FrameLayout)
线性布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi ...
- 串口编程-termios编程
linux使用terminfo数据库来描述终端能力以及调用对应功能的方法.POSIX定义了完成终端I/O的标准方法:termios函数族 #include <termios.h>#incl ...
- 在.net4的环境下使用Microsoft.AspNet.SignalR.Client 2.4.0
我的环境是运行在.net 4 framework,并且使用了signalr 在重连的时候发现,运行的服务被关闭了.找不到合适的处理的办法.因为报错是 说明: 由于未经处理的异常,进程终止.异常信息: ...
- hdu4746 Mophues 莫比乌斯
/** 题目:hdu4746 Mophues 链接:http://acm.hdu.edu.cn/showproblem.php?pid=4746 题意:求x,y在给定范围内gcd(x,y)分解素因子的 ...
- 虚拟化–操作系统级 LXC Linux Containers内核轻量级虚拟化技术
友情提示:非原文链接可能会影响您的阅读体验,欢迎查看原文.(http://blog.geekcome.com) 原文地址:http://blog.geekcome.com/archives/288 软 ...