开发小知识1

这里主要是总结了一些平时在开发过程中遇到的一些常见小知识,方便自己以后回顾。

1.获取验证码倒计时功能

js代码:

 1           var countdown=60;
 2           function settime(obj) {
 3               if (countdown == 0) {
 4                   obj.removeAttribute("disabled");
 5                   obj.value="获取验证码";
 6                   countdown = 60;
 7                   return;
 8               } else {
 9                   obj.setAttribute("disabled", true);
10                  obj.value="重新发送(" + countdown + ")";
11                  countdown--;
12              }
13              setTimeout(function() {
14                      settime(obj) }
15                  ,1000)
16          }            

HTML代码:

1 <input type="button" class="get-code" value="获取验证码">      

 

根据需求调用倒计时代码:

1         $('.get-code').click(function () {
2              var phoneNum = $('#phone').val();
3              if(phoneNum){
4                  settime(this);
5              }else{
6                  alert('请输入手机号!');
7              }
8          });

 

 

效果如下图所示:

         

 

 


 

 

2.阻止a标签跳转

 (1)

<a href="#">a标签</a>

#是标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端。此方法会刷新页面。

 

(2)

<a href="javascript:void(0);">a标签</a>

void是一个操作符,void(0)返回undefined,地址不发生跳转。此方法不仅可以阻止a标签跳转,还不会刷新页面。

 

(3)

<a href="javascript:;" >a标签</a>

和void(0)一样,都返回"undefined"。

 

(4)

<a href="http://www.baidu.com" onclick=" return false; ">a标签</a>

事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接未被点击。

上诉代码中,当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。

 


 

3.文字超出用省略号代替

 给需要超出部分用省略号代替的部分加上如下css代码:

1 {
2     width: 500px;  /*必须设置宽度*/
3     overflow: hidden;  /*溢出隐藏*/
4     text-overflow: ellipsis; /*以省略号...显示*/
5     white-space: nowrap;  /*强制不换行*/
6 }

overflow: hidden
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。hidden 表示内容会被修剪,并且剪掉的内容是不可见的。

white-space: nowrap
规定文本不进行换行。white-space 属性设置如何处理元素内的空白。nowrap 表示文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

text-overflow: ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis 表示显示省略符号来代表被修剪的文本。

width:100px
width 属性设置div的长度。这个是一定要设置的,不然上面三个css属性将没有效果!

 


 

4.localStorage

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

(在开发手机页面的时候,在登录页使用cookie保存数据之后,在其他页面获取不到数据,后来换成了 localstory 是可以的,但是仍然不清楚cookie为什么不能用。)

 

使用方法与SessionStorage如出一辙,如下代码所示:
此对象主要有两个方法:
  (1)保存数据:

localStorage.setItem(Key, value);

  (2)读取数据:

localStorage.getItem(Key);

  Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
  Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。

 

在使用过程中,例如在登录页保存登录账号密码,然后在主页提取信息,代码如下:

 


 

5.HTML5中a标签打电话和发邮件等特殊功能

在做移动网站开发的时候我们往往需要友好的功能交互,其中点击某电话号码直接拨打电话或者直接发送短信是个很不错的用户体验,实现起来也很简单。都是通过a标签的href属性来实现的。

(1)拨打电话

例如给 10086 打电话:

<a href="tel:10086">10086</a>

开发实例:

 

点击 购买咨询 :

点击 呼叫 :

 

(2)发短信

<!--(1)给 10086 发短信:-->
<a href="sms:10086">发送信息</a>

<!--(2)给 10086 发送内容为"cxye"的短信:-->
<a href="sms:10086?body=cxye">发送信息</a>

<!--(3)给 10086 和 10010 发送内容为"cxye"的短信:-->
<a href="sms:10086,10010?body=cxye">发送信息</a>

 

(3)发邮件

<!--(1)给test1@163.com发送邮件:-->
<a href="mailto:test1@163.com">mail</a>

<!--(2)给test1@163.com和test2@126.com发送邮件:-->
<a href="mailto:test1@163.com,test2@126.com">mail</a>

<!--(3)给test1@163.com发送主题为“testing”的邮件:-->
<a href="mailto:test1@163.com?subject=Testing">mail</a>

<!--(4)给test1@163.com发送主题为“testing”的邮件,并抄送给test3@126.com:-->
<a href="mailto:test1@163.com?subject=Testing mailto&cc=test3@126.com">mail</a>

 


 

posted @ 2017-08-02 10:17  *茉莉花开*  阅读(251)  评论(1编辑  收藏  举报