标签存档: HTML

上传图预览

作者: 日期: 2018年6月14日 没有评论

HTML部分

<img id="pscover" src="__PUBLIC__/Home/images/z_70.jpg" alt="" />
<input type="file" name="scover" id="scover" />
<img id="pqr" src="__PUBLIC__/Home/images/z_70.jpg" alt="" />
<input type="file" name="qr" id="qr"/>

JS部分(注意引入jQ)

window.onload = function(){
	var arr = new Array();
	arr["img[id='pscover']"] = "input[name='scover']";
	arr["img[id='pqr']"] = "input[name='qr']";
	for(var i in arr){
		void function(i){
			$(arr[i]).on("change",function(){
		 		var pic = this.files[0];
		 		pic_preview(pic,i);
			})		
		}(i)	 	
	}
	function pic_preview(pic,obj){
		var f = new FileReader();
		f.readAsDataURL(pic);
		f.onload = function (e){
			$(obj).attr("src",this.result).show();
		}
	}	
}

短信发送倒计时功能

作者: 日期: 2018年4月20日 2 条评论

  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遍历数组和对象

作者: 日期: 2018年4月16日 没有评论 
/*
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);
});

SpringMVC静态页面例子

作者: 日期: 2017年11月22日 没有评论

下面的例子说明了如何使用 Spring MVC 框架来编写一个简单的基于 web 的应用程序，它可以在 <mvc:resources> 标签的帮助下访问静态页面和动态页面。为了开始使用它，让我们在恰当的位置使用 Eclipse IDE，然后按照下面的步骤使用 Spring 的 Web 框架来开发一个动态的基于表单的 Web 应用程序：

步骤 描述
1 创建一个名称为 HelloWeb 的动态 Web 项目，并且在已创建的项目的 src文件夹中创建一个包 com.tutorialspoint。
2 将上面提到的 Spring 和其他库拖拽到文件夹 WebContent/WEB-INF/lib中。
3 在 com.tutorialspoint 包下创建一个 Java 类 WebController。
4 在 WebContent/WEB-INF 文件夹下创建 Spring 的配置文件 Web.xml 和 HelloWeb-servlet.xml。
5 在 WebContent/WEB-INF 文件夹下创建名称为 jsp 的子文件夹。在这个子文件夹下创建一个视图文件 index.jsp。
6 在 WebContent/WEB-INF 文件夹下创建名称为 pages 的子文件夹。在这个子文件夹下创建一个静态文件 final.htm
7 最后一步是创建所有的源代码和配置文件的内容，并导出该应用程序，正如下面解释的一样。


这里是 WebController.java 文件的内容：

package com.tutorialspoint;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class WebController {
   @RequestMapping(value = "/index", method = RequestMethod.GET)
   public String index() {   
       return "index";
   }   
   @RequestMapping(value = "/staticPage", method = RequestMethod.GET)   
   public String redirect() {     
      return "redirect:/pages/final.htm";
   }
}


下面是 Spring Web 配置文件 web.xml 的内容：

<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>Spring Page Redirection</display-name>

    <servlet>
        <servlet-name>HelloWeb</servlet-name>
        <servlet-class>
           org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>HelloWeb</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>


下面是另一个 Spring Web 配置文件 HelloWeb-servlet.xml 的内容：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
 http://www.springframework.org/schema/mvc
 http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context-3.0.xsd">

    <context:component-scan base-package="com.tutorialspoint" />

    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
    </bean>

    <mvc:resources mapping="/pages/**" location="/WEB-INF/pages/" />
    <mvc:annotation-driven/>

</beans>

在这里，<mvc:resources…./> 标签被用来映射静态页面。 mapping 属性必须是一个指定一个 http 请求的 URL 模式的 Ant 模式。 location 属性必须指定一个或者多个具有包含图片，样式表，JavaScript 和其他静态内容的静态页面的资源目录位置。多个资源位置可以使用逗号分隔这些值的列表来被指定。

下面是 Spring 视图文件 WEB-INF/jsp/index.jsp 的内容。这将是一个登陆页面，这个页面将发送一个请求来访问 staticPage 的 service 方法，它将重定向这个请求到 WEB-INF/pages 文件夹中的一个可用的静态页面。

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
    <title>Spring Landing Page</title>
</head>
<body>
<h2>Spring Landing Pag</h2>
<p>Click below button to get a simple HTML page</p>
<form:form method="GET" action="/HelloWeb/staticPage">
<table>
    <tr>
    <td>
    <input type="submit" value="Get HTML Page"/>
    </td>
    </tr>
</table>  
</form:form>
</body>
</html>


下面是 Spring 视图文件 WEB-INF/pages/final.htm 的内容：

<html>
<head>
    <title>Spring Static Page</title>
</head>
<body>
<h2>A simple HTML page</h2>
</body>
</html>

最后，下面是包含在你的 web 应用程序中的 Spring 和其他库的列表。你仅仅需要将这些文件拖拽到 WebContent/WEB-INF/lib 文件夹中。

  • commons-logging-x.y.z.jar

  • org.springframework.asm-x.y.z.jar

  • org.springframework.beans-x.y.z.jar

  • org.springframework.context-x.y.z.jar

  • org.springframework.core-x.y.z.jar

  • org.springframework.expression-x.y.z.jar

  • org.springframework.web.servlet-x.y.z.jar

  • org.springframework.web-x.y.z.jar

  • spring-web.jar

一旦你完成了创建源代码和配置文件后，导出你的应用程序。右键单击你的应用程序，并且使用 Export > WAR File 选项，并且在 Tomcat 的 webapps文件夹中保存你的 HelloWeb.war 文件。

Apache设置防盗链

作者: 日期: 2017年11月17日 没有评论

盗链，就是盗取链接，假如我们的网站有很多好看的图片，别人可以查看我们网站图片的链接，然后应用在他的网站上，这样的话，去访问他的网站，实际上消耗的是我们的流量（因为实际链接在我们这里），这样我们就不得不去配置防盗链，使得别人不能复制我们图片的链接。

[root@localhost ~]# vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 
<VirtualHost *:80>
    DocumentRoot "/data/www"
    ServerName www.test.com
    ErrorLog "logs/test.com_error_log"
    CustomLog "logs/test.com_access_log" combined
    SetEnvIfNoCase Referer "^http://.*\.test\.com" local_ref    # 表示只有 test.com 和 abc.com 的访问才允许，其他的都拒绝
    SetEnvIfNoCase Referer ".*\. abc\.com" local_ref
    <filesmatch "\.(txt|doc|mp3|zip|rar|jpg|gif|png)">
        Order Allow,Deny
        Allow from env=local_ref
        Deny from all
    </filesmatch>
</VirtualHost>