纯JavaScript实现一些小功能
一、实时刷新（1秒）的时钟
需要注意的地方：
JavaScript代码放置的位置问题，如果放在body元素之前，可能会出现getElementById找不到id，这是可能容易忽略的地方。要是忽略了，可能会骂街。。
另外，注意一下setInterval函数的调用方法，怎么写是正确的，怎么写是错误的！！
其他的没什么，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实时时钟显示</title>
<style type="text/css">
*{ margin:0px auto;
padding:15px;
color:#90F;
text-align:center;}
</style>
<script type="text/javascript"> var myDate=function()
{
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var str=year+'年'+month+'月'+day+'日'+' '+hours+'时'+minutes+'分'+seconds+'秒';
var myClock=document.getElementById("clock");
myClock.innerHTML=str;
};
var timeOut=function()
{
//这种写法错误 不能使用双引号
//window.setInterval("myDate()“,1000); //注意这里不是setTimeout函数 以毫秒为单位
//写法错误 函数的小括号不能省略
//window.setInterval('myDate',1000); //注意这里不是setTimeout函数 以毫秒为单位
//写法正确 注意使用的是单引号
//window.setInterval('myDate()',1000); //注意这里不是setTimeout函数 以毫秒为单位
//下面的写法也可以 函数没有小括号
window.setInterval(myDate,1000); //注意这里不是setTimeout函数 以毫秒为单位
//下面的写法也是可以的
//不过据说这时myDate()函数会立即执行 这个待研究
//window.setInterval(myDate(),1000); //注意这里不是setTimeout函数 以毫秒为单位
}
window.onload=timeOut;
</script> </head> <body>
<h1>
测试时间
<p id="clock">
</p>
</h1>
</body>
</html>
运行截图：
这里插一段循环计数的定时器代码：
<script type="text/javascript">
function count(start, end)
{
var time=null;
var ct=start;
this.s=function()
{ console.log(ct);
ct+=1;
if(ct>end)
{
ct=start;
}
}
s();
time=setInterval("s()",1000); this.cancel=function()
{
clearInterval(time);
}
return this;
}
var temp=count(1,5);
//temp.cancel(); 用于取消定时器
</script>
二、生成10个100-1000之间的随机整数数
需要用的函数Math.random()，以及Math.floor()函数
参考网址：http://www.111cn.net/wy/js-ajax/57062.htm
Math.random()函数，默认生成的是介于0-1之间的随机小数，那如果按照题目的意思，我们就应该使用(Math.random()*(1000-100+1)+100)，然后再取整，这样就可以达到我们的要求了。
代码：
for(var i=0;i<10;i++)
{
var temp=Math.floor(Math.random()*901+100);
console.log(temp);
document.write(temp+'\t');
}
运行截图：
三、一个简单的登陆表单验证代码段
JavaScript代码：
var check=function()
{
var log_name=document.getElementById("log_name");
if(!log_name.value)
{alert("请输入用户名");}
var log_pass=document.getElementById("log_password");
if(!log_pass.value)
{alert("请输入密码");}
}
html代码(这里我们暂时忽略css代码，我这里也确实没有写CSS代码来控制样式，这里它不是重点)：
<form>
<label>用户名：</label>
<input id="log_name" type="text" placeholder="请输入用户名">
<label>密 码：</label>
<input id="log_password" type="password" placeholder="请输入密码">
<input type="submit" value="登陆" onClick="check()">
</form>
运行截图，什么也不输入的时候，直接点击submit按钮：
这里啰嗦几句：
那就是如何检测输入框 的内容为空，我们分别测试一下以下几种情况：
‘’，“”，null，undefined
经过测试，只有“”和‘’，是可以成功检测的，当然按照刚刚上面的代码那样使用！符号测试也是可以的。
以下是测试代码，为了分别，我直接把代码也截到图里面了。
“”的情况：
‘’的情况：
null的情况（从截图中可以看出，用户名的输入框并没有被正确的检测出来）：
undefined的情况（同样没正确检测出来）：
四、cookie的使用（设置、获取以及有效期设置）
注意几点：
首先，cookie的设置和获取函数怎么实现的？
其次，有效期怎么设置（一个月）？
再次，使用正则表达式过滤字符串的空格时的注意事项。。。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Script type="text/javascript">
function save()
{
if((document.myForm.uname.value)&&(document.myForm.upass.value))
{
if(confirm("是否保存用户名密码?"))
{
saveUserName();
saveUserPass();
}
}
else if(!document.myForm.uname.value)
{
alert("用户名不能为空！");
document.myForm.uname.focus();
//document.myForm.uname.select();
return false; //这句话不可少 否则输入焦点将不能定位到输入框 确切的说是定位了然后又移开了（过程一闪而过）
}
else if(!document.myForm.upass.value)
{
alert("密码不能为空！");
//document.myForm.upass.select();
document.myForm.upass.focus();
return false;
}
}
function saveUserName(){
var userName ='';
userName = document.myForm.uname.value;
var exp=new Date();
exp.setTime(exp.getTime()+30*24*60*60*1000); //设置过期时间为一个月
document.cookie="un="+userName+";expires=" + exp.toGMTString(); ;
}
function saveUserPass(){
var userPass ='';
userPass = document.myForm.upass.value;
document.cookie="pwd="+userPass;
}
/*function getCookie(key,cookie){
var r=new RegExp(key+'=([^;]+)','i')
var m=r.exec(cookie);
if(m)return m[1];
return ''
}*/ function getCookie(key,cookie)
{
//var strCookie=document.cookie; //获取cookie字符串
var arrCookie=cookie.split(";"); //将多cookie切割为多个名/值对
for(var i=0;i<arrCookie.length;i++)
{
var arr=arrCookie[i].split("=");
//注意这里一定要有str来接收返回值 这里的正则表达式是不会改变arr[0]的值的 切结！！！！！
str=arr[0].replace(/(^\s*)|(\s*$)/g,"");//正则表达式去掉字符串头和尾的空格
if((key==str))
{
return arr[1];
}
}
return "";
} function show(){
var strCookie = document.cookie;
var userName ;
var userPass ;
if(strCookie == null){ //cookie为空
document.myForm.uname.value="";
document.myForm.upass.value="";
}else{ userName = getCookie('un',strCookie);
userPass = getCookie('pwd',strCookie);
//alert(userPass);
document.myForm.uname.value = userName;
document.myForm.upass.value = userPass;
}
}
</Script>
<style type="text/css">
*{
margin:0 auto;
padding:15px;
color:#90F;}
</style>
</head> <body> <form action="test1.html" name="myForm" method="post">
用户名：<input type="text" name="uname" placeholder="请输入用户名"/>
密  码:
<input type="text" name="upass" placeholder="请输入密码"/><!--这里为了看到密码，故没有设置隐藏密码-->
<br />
<br />
<input type="submit" name="submit" value="提交" onclick="return save()"/>
<input type="button" value="自动填充用户名密码" onClick="show()"/>
<input type="reset" name="reset" value="重置"/> </form>
</body>
</html>
运行截图（IE11可以正常运行，但是chrome不行，不知道为什么。。。）：
点击提交，会弹出保存密码对话框，选择确定，会跳转到另外一个页面。
顺便上一下另外一个页面的代码，便于实际测试运行（两个页面文件嬴荡放在同一目录下）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试字符串</title>
<script type="text/javascript">
var s = " asd ddd bbb sss ";
document.write(s.length+'\n');
document.write(s+'\n'); var reg = /\s/g; //去掉所以的空格
var ss = s.replace(reg, "");
document.write(ss.length+'\n');
document.write(ss+'\n'); var reg=/(^\s*)|(\s*$)/g; //去掉头尾的空格
var ss = s.replace(reg, "");
document.write(ss.length+'\n');
document.write(ss+'\n'); </script>
<style type="text/css">
*{
margin:0 auto;
padding:15px;
color:#90C;
text-align:center;}
</style>
</head>
<body> </body>
</html>
五、滚动显示文字
实现一个文本输入框内的文字滚动显示，从右向左滚动
这里运用了一个string对象的substring方法
substring(<从位置>，<到位置>)——截取一个子字符串
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字循环显示</title>
<script type="text/javascript">
var str="这是一串测试文字。你知道吗？我不知道。"
var loopDisplay=function()
{
txt.value=str;
str=str.substring(1,str.length)+str.substring(0,1); //重新拼接字符串
setTimeout(loopDisplay,500); //定式刷新 产生滚动显示效果
}
</script>
<style type="text/css">
p input{
display:block;
margin:0 auto;
margin-top:100px;
width:300px;
height:50px;
font-size:20px;
border:2px solid #666;
border-radius:5px;
box-shadow:0px 0px 10px #0000FF;}
</style>
</head>
<body onLoad="loopDisplay()">
<p><input id="txt" type="text"></p>
</body>
</html>
截图如下：
以上是，从右往左滚动，那么，从左往右滚动呢？
很简单，上面的代码：改一句
str=str.substring(str.length-1,str.length)+str.substring(0,str.length-1); //重新拼接字符串
改成上面这样就可以了。
纯JavaScript实现一些小功能的更多相关文章
- JavaScript 常用的小功能集合
1. 得到当前用户使用的浏览器的内核版本 function getExplorer(){ var browser = ""; var explorer = window.navig ...
- javascript实现的一个信息提示的小功能/
//什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...
- 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作～
今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- javascript日历控件——纯javascript版
平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- ( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
- ( 译、持续更新 ) JavaScript 上分小技巧(二)
考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...
随机推荐
- android小结
一. 对与java读写文件的操作: 字节流: //filename 可以是文件名,可以是文件路径 FileOutputStream outputStream=new FileOutputStream ...
- ADB无线连接
注意:PC和手机在同一个局域网 背景:很长的时候手机线不够用,连接线还是不爽,偶尔会掉,平时可能手机会被拿走,重现crash的问题,不能很友好的使用DDMS,自己找了一些文章,ADB无线连接,实验成功 ...
- highcharts 24小时显示数据，显示00:00格式的数据
Showing 24 hours on xAxis WITHOUT a date on 00:00 格式参考PHP手册中的: strftime
- 对象创建型模式------Builder(生成器）
本文系转载,转载地址http://blog.sina.com.cn/s/blog_59b6af690100zj3l.html,只供自己学习使用. 假设现在有三种产品,是玩具,都是由三部分组成,头,身体 ...
- WEB系统技术开发方向
1. UI框架:要可以结合jquery+自定义服务器控件开发一套UI框架: 2.WEB报表设计器:用js开发一套可以自定义报表设计器: 3.WEB自定义表单+工作流设计器: 4.WEB打印组件: 5. ...
- python 笔记（一）
1.Python优点 简单,优雅,明确 强大的模块第三方库 易移植 面向对角 可扩展 2.缺点 代码不能加密 执行速度慢 3.变量定义 第一个字母必须是字母表中的大小写,或下划线.不能以数字为开头. ...
- 第二篇、HTML5新增标签
<html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...
- 12天学好C语言——记录我的C语言学习之路（Day 6）
12天学好C语言--记录我的C语言学习之路 Day 6: 今天,我们要开始学习数组了. //①数组部分,数组的大小不能够动态定义.如下: //int n; scanf("%d,& ...
- Windows下lex 与 yacc的使用
Windows下lex 与 yacc的使用 首先 下载下载flex和bison.网址是http://pan.baidu.com/s/1dDlfiW5 选择下载就好了,下载后解压到你电脑中的任一盘中. ...
- 问题解决：使用angularjs、ionic框架如何实现返回上一页并刷新
普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中使用的一个返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后 ...