javascript通过正则表达式限制输入框只能输入数字

阅读(29)

今天就来说记录下关于javascript通过正则表达式限制输入框只能输入数字的问题

1.使用正则表达式限制输入框只能输入数字:

<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " name="f_order" value="1"/>

其中,onafterpaste防止用户从其它地方copy内容粘贴到输入框。

2.输入框只能输入字母和下横线的正则表达式

<input onkeyup="this.value=this.value.replace(/[^_a-zA-Z]/g,'')" onpaste="this.value=this.value.replace(/[^_a-zA-Z]/g,'')">

3.输入框只能输入字母数字和下横线的正则表达式

<input onkeyup="this.value=this.value.replace(/[^\w]/g,'')" onpaste="this.value=this.value.replace(/[^\w]/g,'')">

或者

<input onkeyup="this.value=this.value.replace(/[\W]/g,'')" onpaste="this.value=this.value.replace(/[\W]/g,'')">

鼠标悬浮鼠标离开的时候变化太快的解决方案

阅读(29)

其实对于鼠标悬浮这个效果是我们很常用的一个特效,可是我们每次在添加一个鼠标悬浮,比如背景颜色变化的时候,我们在让鼠标进入的时候,缓慢变化,出来的时候也是缓慢变化,而不是骤变这种,体验太差,最开始是这样的:

<style type="text/css">
 a{
 padding:30px 50px;
 background: red;
 text-decoration: none;
 }
 a:hover{
 padding:30px 50px;
 background: blue;
 transition: 1s ease;
 }
</style>

<div>
 <a href="#" title="">egei9bner</a>
</div>

这样的话,悬浮上去的时候变化确实是缓慢变化,持续时间1s,可是离开的时候就不是了,解决很简单,把那个transition用在a标签上面,而不是伪类上面。正确的应该是:

<style type="text/css">
 a{
 padding:30px 50px;
 background: red;
 text-decoration: none;
 transition: 1s ease;
 }
 a:hover{
 padding:30px 50px;
 background: blue;
 }
</style>

<div>
 <a href="#" title="">egei9bner</a>
</div>

这样无论是进入阶段还是离开阶段,都是缓慢变化的。

怎么样实现wordpress的enfold主题Modal弹窗效果

阅读(85)

Modal这个element必须跟Button或tagline box结合使用才可以,因为如果modal是一辆车的话,button就是车钥匙,车必须有钥匙才可以启动。另外,弹窗也叫Popup

第一种是点击button实现弹窗效果

1. 添加modal和button

在elements里面分别点击Button和modal这两个elements (shortcode),就可以将这两个elements加入到正文中

2. 设置button

button url 留空

Button’s Text 填上文字

Modal window anchor  填上小写英文单词,如inquiry, 不要填contact form这种带空格的句子或短语

3. 设置Modal

Name of modal   填上跟上面button的Modal window anchor一模一样的小写字母单词

size of modal     选择弹窗的大小

content of modal 填的是你的弹窗内容,像表单,图片,视频等,只要把相应的内容放进去,保存即可

询盘表单弹窗效果如下:

视频的弹窗效果如下:

第二种是点击文字或图片实现弹窗效果

1.在element里面选择modal text link这一个,并插入到页面中

2.在name of modal中输入inquiry,不要填contact form这种带空格的句子或短语,并在text or html code中输入文字,如果想做成图片弹窗就输入图片的html代码<img src=”#” /> ,并在#处填上图片的链接

3. 插入modal这个element,并填好name of modal并填入弹窗的内容,保存刷新即可实现文字或图片的弹窗效果

Name of modal   填上跟上面一模一样的小写字母单词

size of modal     选择弹窗的大小

content of modal 填的是你的弹窗内容,像表单,图片,视频等,只要把相应的内容放进去,保存即可

nginx 反向代理 取得真实IP和域名

阅读(80)

一、反向代理配置:

完整配置示例

(/etc/nginx/nginx.conf)     注意这个nginx.conf,可能不是默认的这个,有的人自定义了的,得根据自己配置走,反正是跟着自己的配置文件走就行了,你的设置在哪个配置文件中就去哪个配置文件中加这个:

worker_processes  1;
events {
    worker_connections  1024;
} 
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65; 

    upstream backend {             
       server 192.168.56.4;
       server 192.168.56.5;
    fair;
    } 

    server {
        listen       80;
        server_name  _; 

        location / {

        #设置主机头和客户端真实地址,以便服务器获取客户端真实IP
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

             #禁用缓存
             proxy_buffering off; 

             #反向代理的地址
             proxy_pass http://backend;    
        }
    } 
}

二、获取真实客户端ip

nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递到应用程序中。

笔者这里加的是这样的:

server_name www.zhangsan.com;

location ^~/api/ {

 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header REMOTE-HOST $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 #禁用缓存
 proxy_buffering off;

proxy_pass http://localhost:9899/api/;
}
location / {

 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header REMOTE-HOST $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 #禁用缓存
 proxy_buffering off;

root /home/username/zhangsan_html;
 index index.html;
}

nginx反向代理配置时,一般会添加下面的配置:

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

其中第一行关于host的配置,是关于域名传递的配置,余下跟IP相关。

PHP中取得客户端真实IP

function getClientIP() {
$ip = "unknown";
 if (isset($_SERVER)) {
 if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) {
 $ip = $_SERVER["HTTP_X_FORWARDED_FOR"];
 } elseif (isset($_SERVER["HTTP_CLIENT_ip"])) {
 $ip = $_SERVER["HTTP_CLIENT_ip"];
 } else {
 $ip = $_SERVER["REMOTE_ADDR"];
 }
 } else {
 if (getenv('HTTP_X_FORWARDED_FOR')) {
 $ip = getenv('HTTP_X_FORWARDED_FOR');
 } elseif (getenv('HTTP_CLIENT_ip')) {
 $ip = getenv('HTTP_CLIENT_ip');
 } else {
 $ip = getenv('REMOTE_ADDR');
 }
 }
 if(trim($ip)=="::1"){
 $ip="127.0.0.1";
 }
 return $ip;
}

笔者在tp5中的用法如下:

$ip = "unknown";
 if (isset($_SERVER)) {
 if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) {
 $ip = $_SERVER["HTTP_X_FORWARDED_FOR"];
 } elseif (isset($_SERVER["HTTP_CLIENT_ip"])) {
 $ip = $_SERVER["HTTP_CLIENT_ip"];
 } else {
 $ip = $_SERVER["REMOTE_ADDR"];
 }
 } else {
 if (getenv('HTTP_X_FORWARDED_FOR')) {
 $ip = getenv('HTTP_X_FORWARDED_FOR');
 } elseif (getenv('HTTP_CLIENT_ip')) {
 $ip = getenv('HTTP_CLIENT_ip');
 } else {
 $ip = getenv('REMOTE_ADDR');
 }
 }
 if(trim($ip)=="::1"){
 $ip="127.0.0.1";
 }

获取到用户的$ip的IP后,就可以插入数据库了。

原文参考:https://www.cnblogs.com/luotingliang/p/7289811.html

[转]大前端主题DUX添加主题themebetter首页顶部样式

阅读(50)

这里正对dux主题做一个小的首页修改,添加一个banner,在附加几个功能选项,这里的样式是仿造themebetter主题首页顶部的样式,

用过dux的都知道是wordpress的dux主题是themebetter制作开发的,虽然dux非常强大美观,但是首页还是没有和themebetter主题一样的功能样式,感觉themebetter的顶部banner样式非常好看实用,

于是这里根据美化和效果,我们来对dux进行修改,添加一个和themebetter一样的多功能顶部banner。

教程代码

首先将以下代码添加你合适的位置,无作为建议添加主题根目录下header.php最下端,当然自己喜欢那里就选那里都是一样的:

<div class="focusbanner" style="background-image:url(http://themebetter.com/static/bg/bg_04.jpg)">
 <div class="container"> <a href="javascript:;" class="signin-loader"><p class="btn btn-primary">登录 NPIE</p></a> <a href="javascript:;" class="signup-loader"><p class="btn btn-whrite">我要注册</p></a> </div>
</div>
 
<div class="container">
 <ul class="eboxx">
 <li class="eboxx-i eboxx-01">
 <h4>个性化主题</h4>
 <p>扁平化、简洁白色、多设备支持、多功能配置</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.habotalk.com/">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-02">
 <h4>个性化主题</h4>
 <p>扁平化、简洁风格,适用于图片展示站点和个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.habotalk.com/">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-03">
 <h4>简洁主题</h4>
 <p>大气设计,适用于企业站、行业垂直站、团队站及个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.habotalk.com/">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-04">
 <h4>清爽主题</h4>
 <p>简洁2栏,适用于个人站点及团队博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 </li>
 <li class="eboxx-i eboxx-100">
 <h4>WordPress主题定制</h4>
 <p>完全按照您的需求量身打造,此项服务需要排期,具体请联系我们</p>
 <a class="btn btn-sm btn-danger" target="_blank" rel="nofollow" href="http://www.habotalk.com/">联系我们</a>
 </li>
 </ul>
</div>

添加CSS

注:DUX主题如果单纯添加ebox样式的话会和大前端dux主题小工具主题推荐和前段开发的样式冲突,所以这里为了不产生冲突无阻我重新定义了一个样式eboxx:

/* focusbanner habotalk.com================================================================================ */
.focusbanner {
text-align: center;
margin-bottom: 20px;
height: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.focusbanner .container {
padding-top: 88px;
padding-right: 60px;
text-align: right;
}
.focusbanner .btn {
margin-left: 10px;
}
/* btn habotalk.com======================================================================================== */
.btn {
display: inline-block;
padding: 6px 15px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-default {
color: #555;
background-color: #fff;
border-color: #d6d6d6;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
color: #333;
background-color: #e6e6e6;
border-color: #bbb;
}
.btn-primary {
color: #fff;
background-color: #00AAEE;
border-color: #00AAEE;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: #00A1EC;
border-color: #00A1EC;
}
.btn-success {
color: #fff;
background-color: #50CD7C;
border-color: #50CD7C;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
color: #fff;
background-color: #3CC76D;
border-color: #3CC76D;
}
.btn-danger {
color: #fff;
background-color: #FF8966;
border-color: #FF8966;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
color: #fff;
background-color: #FF6F44;
border-color: #FF6F44;
}
.btn-whrite {
color: #555;
background-color: #fff;
border-color: #fff;
}
.btn-whrite:hover, .btn-whrite:focus, .btn-whrite:active {
color: #333;
background-color: #fff;
border-color: #fff;
}
.btn-xs {
padding: 2px 6px;
font-size: 12px;
}
.btn-sm {
padding: 4px 12px;
}
.btn-lg {
font-size: 20px;
border-radius: 4px;
padding: 10px 25px;
}
.btn-block {
width: 100%;
}
/* ebox habotalk.com======================================================================================= */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 20px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 20%;
padding: 20px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
border-right: 2px solid #eee;
}
.eboxx-i:hover {background-color: #F9F9F9;}
.eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
@media (max-width: 1024px) {
.eboxx .btn-default {display: none;}
.eboxx h4 {height: 20px;overflow: hidden;}
}
@media (max-width: 860px) {
.eboxx .eboxx-100 {display: none;}
.eboxx-i {width: 25%;}
.eboxx-04 {border-right: none;}
}
@media (max-width: 640px) {
.eboxx-i {width: 50%;}
.eboxx-01 {border-bottom: 2px solid #eee;}
.eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
}
@media (max-width: 480px) {
.eboxx-i {padding: 10px 15px 15px;}
.eboxx h4 {margin-bottom: 0;}
.eboxx-i p {margin: 5px 0}
}

到这里就完全添加完毕了,大家可以打开自己的首页进行刷新查看了。

笔者这里写放在自己的首页的模板文件里面,就是直接放在header后面。

原文链接:https://www.wuzuowei.net/6422.html