标签存档: W3C标准

短信发送倒计时功能

  1.  html代码:

<input class="inpt-hm" type="text" id="mobile" name="mobile" placeholder="请输入手机号码">
<input class="yzma-put" type="text" placeholder="请输入验证码">
<input id="btnSendCode" type="button" id="btn" value="发送验证码" onclick="sendMessage()">

   2.  js代码:

var InterValObj; //timer变量,控制时间  
var count = 60; //间隔函数,1秒执行  
var curCount;//当前剩余秒数 
	
function sendMessage() {  
	 curCount = count;  
	        
	 var mobile = $("input.inpt-hm").val();
	 
	 if(mobile.length != 11 || mobile.substr(0,1)!=1){
		alert("手机格式不正确!");
		$("input.inpt-hm").select();
		return false;
	}else{
		//设置button效果,开始计时  
		$("#btnSendCode").attr("disabled", "true");  
		$("#btnSendCode").val(curCount + "秒后重新发送");
		//启动计时器,1秒执行一次	 
		InterValObj = window.setInterval(SetRemainTime, 1000); 		 
		$.ajax({
		      url:"/SendSMS.php",
		      data:{
		            mobile:mobile
		      },
		      dataType:'json',
		      type:'post',
		      success:function (data) {
		         console.table(data);
		         if(data['success'] == "false"){
		            alert("系统错误");
		         }		                
		      }
		 });	 	
		}             
	  
	}
//timer处理函数  
function SetRemainTime() {  
	 if (curCount == 0) {                  
	      window.clearInterval(InterValObj);//停止计时器  
	      $("#btnSendCode").removeAttr("disabled");//启用按钮  
	      $("#btnSendCode").val("重新发送验证码");  
	 }  
	 else {  
	      curCount--;  
	      $("#btnSendCode").val(curCount + "秒后重新发送");  
	 }  
}

   3.   SendSMS.php

<?php
/**
 * 启瑞云短信接口Demo(utf-8)
 */
class SendDemo
{
    const SENDURL = 'http://api.qirui.com:7891/mt';

    private $apiKey;
    private $apiSecret;

    /**
     * 构造方法
     * @param string $apiKey    接口账号
     * @param string $apiSecret 接口密码
     */
    public function __construct($apiKey, $apiSecret)
    {
        $this->apiKey    = $apiKey;
        $this->apiSecret = $apiSecret;
    }

    /**
     * 短信发送
     * @param string $phone   	手机号码
     * @param string $content 	短信内容
     * @param integer $isreport	是否需要状态报告
     * @return void
     */
    public function send($phone, $content, $isreport = 1)
    {
        $requestData = array(
            'un' => $this->apiKey,
            'pw' => $this->apiSecret,
            'sm' => $content,
            'da' => $phone,
            'rd' => $isreport,
            'dc' => 15,
            'rf' => 2,
            'tf' => 3,
            );

        $url = self::SENDURL . '?' . http_build_query($requestData);
        return $this->request($url);
    }

    /**
     * 请求发送
     * @return string 返回发送状态
     */
    private function request($url)
    {
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_URL, $url);
        $result = curl_exec($ch);
        curl_close($ch);
        return $result;
    }

}
//end
//实例化类,测试发送

//接口账号
$apiKey    = '1777270010';
//接口密码
$apiSecret = 'bcd9e627095d553da10d';
//接受短信的手机号码
$phone     = empty($_POST["mobile"])?"15872024172":$_POST["mobile"];
//短信内容(【签名】+短信内容),系统提供的测试签名和内容,如需要发送自己的短信内容请在启瑞云平台申请签名和模板
$yzm = rand(1000,9999);
$content   = '【首房在线】'.$phone.'您好,您的验证码是:'.$yzm.",请在3分钟内完成验证。";

session_start();
$_SESSION['yzm'] = $yzm;

$sms    = new SendDemo($apiKey, $apiSecret);
$result = $sms->send($phone, $content);

print_r($result );

jquery遍历数组和对象

/*
jquery中的each是用来遍历数组的而map则是用来映射生成一个新数组的
each方法中的return false相当于循环中的break,return true相当于循环中的continue
map方法中的return 相当于个新数组映射成的一个元素,没有return就相当于新的数组中忽略掉了这个元素
*/

/*遍历数组*/
var arr=["a","b","c"];
console.log("js遍历数组1");
for(var i=0;i<arr.length;i++){
	console.log(i+"--"+arr[i]);
}
console.log("js遍历数组2");
for(var i in arr){
	console.log(i+"--"+arr[i]);
}
console.log("jquery.each遍历数组");
$.each(arr,function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.each遍历数组2");
$(arr).each(function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.map遍历数组1,注意这里回调函数中第一个参数是元素,第二个是索引");
$.map(arr,function(i,item){
	console.log(i+"--"+item);
});
console.log("jqery.map遍历数组2");
console.log($(arr).map(function(i,item){
	console.log(i+"--"+item);
}).length);

/*遍历对象*/
var obj={name:"xiaoming",age:20,addr:"tianminglu"};
console.log("js遍历对象")
for(var i in obj){
	console.log(i+"--"+obj[i]);
}

console.log("jquery.each遍历对象1");
$.each(obj,function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.each遍历对象2")
$(obj).each(function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.map遍历对象1,注意这里回调函数中第一个参数是元素,第二个是索引");

$.map(obj,function(i,item){
	console.log(i+"--"+item);
});	
console.log("jquery.map遍历对象2");
$(obj).map(function(i,item){
	console.log(i+"--"+item);
});

jQuery 元素选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

更多实例

语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

JS热键键值及应用

字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 109 F6 117 F12 123
6 102 . 110
7 103 / 111

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 /| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up A

应用:屏蔽按键或按键组合

function Key Down(){    
  if ((window.event.altKey)&& 
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ← 
       (window.event.keyCode==39))){  //屏蔽 Alt+ 方向键 → 
     alert("不准你使用ALT+方向键前进或后退网页!"); 
     event.returnValue=false; 
     } 
  if ((event.keyCode==8)||            //屏蔽退格删除键 
      (event.keyCode==116)){          //屏蔽 F5 刷新键 
     event.keyCode=0; 
     event.returnValue=false; 
     } 
  if ((event.ctrlKey)&&(event.keyCode==78)){   //屏蔽 Ctrl+n 
     event.returnValue=false; 
     } 
  if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10 
     event.returnValue=false; 
     } 
  if (event.keyCode==122){ //屏蔽 F11 
     event.returnValue=false; 
     } 
  }function Key Down(){    
  if ((window.event.altKey)&& 
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ← 
       (window.event.keyCode==39))){  //屏蔽 Alt+ 方向键 → 
     alert("不准你使用ALT+方向键前进或后退网页!"); 
     event.returnValue=false; 
     } 
  if ((event.keyCode==8)||            //屏蔽退格删除键 
      (event.keyCode==116)){          //屏蔽 F5 刷新键 
     event.keyCode=0; 
     event.returnValue=false; 
     } 
  if ((event.ctrlKey)&&(event.keyCode==78)){   //屏蔽 Ctrl+n 
     event.returnValue=false; 
     } 
  if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10 
     event.returnValue=false; 
     } 
  if (event.keyCode==122){ //屏蔽 F11 
     event.returnValue=false; 
     } 
  }

Twitter将推文上限放宽到280个字符

Twitter表示,从周二起,多数国家的用户将能用280个字符发表推文,而10多年来的上限一直是140个字符。