一个很有趣的CSS3动画效果
一个很有趣的CSS3动画效果,可当过渡页,如loading!
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="robots" content="noindex,follow">
<title>加载中</title>
<style>
body{font-weight:100;margin:0}body{-webkit-tap-highlight-color:transparent;background-color:#222428;font-size:100%;font-family:Open Sans;height:100%}.loader{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-mos-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;width:80%;overflow:visible}.loader,.loader div{position:absolute;height:36px}.loader div{width:30px;margin:0 10px;opacity:0;animation:move 2s linear infinite;-o-animation:move 2s linear infinite;-moz-animation:move 2s linear infinite;-webkit-animation:move 2s linear infinite;transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);color:#fff;font-size:3em}.loader div:nth-child(8):before{background:#db2f00}.loader div:nth-child(8):before,.loader div:nth-child(9):before{content:'';position:absolute;bottom:-15px;left:0;width:30px;height:30px;border-radius:100%}.loader div:nth-child(9):before{background:#f2f2f2}.loader div:nth-child(10):before{bottom:-15px;height:30px;background:#13a3a5}.loader div:after,.loader div:nth-child(10):before{content:'';position:absolute;left:0;width:30px;border-radius:100%}.loader div:after{bottom:-40px;height:5px;background:#39312d}.loader div:nth-child(2){animation-delay:.2s;-o-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-delay:.2s}.loader div:nth-child(3){animation-delay:.4s;-o-animation-delay:.4s;-webkit-animation-delay:.4s}.loader div:nth-child(4){animation-delay:.6s;-o-animation-delay:.6s;-moz-animation-delay:.6s;-webkit-animation-delay:.6s}.loader div:nth-child(5){animation-delay:.8s;-o-animation-delay:.8s;-moz-animation-delay:.8s;-webkit-animation-delay:.8s}.loader div:nth-child(6){animation-delay:1s;-o-animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s}.loader div:nth-child(7){animation-delay:1.2s;-o-animation-delay:1.2s;-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s}.loader div:nth-child(8){animation-delay:1.4s;-o-animation-delay:1.4s;-moz-animation-delay:1.4s;-webkit-animation-delay:1.4s}.loader div:nth-child(9){animation-delay:1.6s;-o-animation-delay:1.6s;-moz-animation-delay:1.6s;-webkit-animation-delay:1.6s}.loader div:nth-child(10){animation-delay:1.8s;-o-animation-delay:1.8s;-moz-animation-delay:1.8s;-webkit-animation-delay:1.8s}@keyframes move{0%{right:0;opacity:0}35%{right:41%}35%,65%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}65%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}}@-webkit-keyframes move{0%,to{opacity:0}0%{right:0}35%{right:41%}35%,75%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}75%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0}}
</style>
</head>
<body class="ie8">
<div class="loader">
<div> C </div>
<div> S </div>
<div> S </div>
<div> 动 </div>
<div> 画 </div>
<div> 吗 </div>
<div> ? </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
演示地址:效果演示
代码
·
JOS京东联盟API接口调用
突然突然突然,觉得做一个京东联盟API调用,也许,在微信QQ等场景是不会有被屏蔽的现象。
于是于是于是,就去研究了下京东联盟API,看着一堆接口,描述的确挺不错的,实际返回内容,可能不是你想的那样。。。
另外另外另外,京东联盟的API调用是需要一个token授权的,而且,这个token授权还需要登陆京东账户的,好在这个token的有效期是1年,在1年内,登陆一次就好!据说,修改过京东账户密码,是需要重新获取一次的!
好吧好吧好吧,那就来获取token授权码,想获取token,先得获取code,通过code,再获取token!
先看下官方说明:
再看下获取授权码的API请求链接:
https://oauth.jd.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&
redirect_uri=YOUR_REGISTERED_REDIRECT_URI&state=YOUR_CUSTOM_CODE
对着参数列表,链接是这样的!
https://oauth.jd.com/oauth/authorize?response_type=code&client_id=你的Appkey&
redirect_uri=你的回调URL&state=随意写
改好后,复制黏贴到浏览器打开,就是一个授权登陆,登陆之后自动跳转到回调地址,参数中带有code值!
通过code值获取token,获取token值请求地址:
https://oauth.jd.com/oauth/token?grant_type=authorization_code&client_id=你的Appkey&
redirect_uri=你的回调URL&code=刚刚获取的code&state=随意写&client_secret= 你的appSecret
复制到浏览器打开,就可以获得需要的token。
另外,有一个叫做Refresh token的刷新token来延迟Access token的时效,也就是,如果获取一次,可以在有效期内延长时间,比如计划!
获取了Access token之后,就可以使用API接口了!
最后,只想说,京东联盟的API,始终没有阿里妈妈API来的方便!
参考官方文档://jos.jd.com/doc/channel.htm?id=152
代码
·
让position:absolute超出DIV溢出隐藏
通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏!
但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏!
效果:
代码:
<style>
.box{
width:200px;
height:150px;
overflow:hidden;
border:2px solid #000;
float:left;
margin-right:20px;
}
.relative{
position:relative;
}
.div{
width:200px;
height:100px;
background:#FF5400;
margin-top:100px;
position:absolute;
}
.zi{
width:200px;
height:300px;
background:#FF0000;
}
</style>
<div class=“box”>
高300px的子元素溢出隐藏
<div class=“zi”></div>
</div>
<div class=“box”>
不带relative
<div class=“div”></div>
</div>
<br><br><br><br><br><br>
<div class=“box relative”>
带上relative
<div class=“div”></div>
</div>
附:
1、CSS overflow属性,overflow 属性规定当内容溢出元素框时发生的事情,所有主流浏览器都支持 overflow 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值:visible
hidden:内容会被修剪,并且其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。
2、position属性,position 属性规定元素的定位类型。所有主流浏览器都支持 position 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值:static
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative:生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit:规定应该从父元素继承 position 属性的值。
代码
·
淘点金href值
最近一段时间,写一个淘点金店铺的集合页(//mall.moutaowang.com),在写链接的时候希望A标签能有站内链接href值,同时又需要点击能直接跳转淘点金链接!按照搜索引擎的观点,站内链接能提高爬虫,实际点击的效果是跳转到淘点金生成的链接!
部署完淘点金链接之后,发现如果有站内href值,淘点金无法生效,移除href值淘点金能成功生效。
淘点金组件部署:
<a biz-sellerid=“1753012236” isconvert=“1” href=“//mall.moutaowang.com/shop/29-1.html” target=“_blank”>申美盛旗舰店</a>
淘点金click组件,需要两个属性biz-sellerid和isconvert
带有href值的直接链接到href的链接,不带href就可以链接到淘客链接!搜索引擎对JS无视,利用JQ过滤href值。
$(“a[isconvert^=’1′]”).each(function(i){
$(this).removeAttr(“href”);
$(this).css(‘cursor’,’pointer’);
这样,查找 isconvert属性的A标签移出href,这样右击查看属性,地址(URL)就是淘点金生成的淘客链接了!
查看源码,href值就是站内的链接!
因为使用JQ,所以要在文档中引入JQ库!
代码
·
CSS padding属性伪block块级化
在html标签中,有不少标签对于CSS的宽高不起作用,如:span,a等标签,想要设置宽高,都需要给标签块级化,在CSS中加上display:inline,display:block,display:inline-block之类的CSS属性才能生效CSS中的宽width和高height,对于块级化的缺憾是,需要站位一行,不想被占用一行的话需要用到浮动float属性。float之后就很难再进行居中!
此时,如果用padding来内充空间的话,也会有块级化的效果!图:
前面的是用display使span标签块级化,生效width和height属性!后面的是用padding来使span具有一定的占用空间!
代码:
唯一的不同就是,一个用了display:block,另外一个是用padding,这个是在分页导航的时候是比较好用的!能使导航居中,无关导航的长度!
代码
·
一款JQ渐显渐隐的TAB切换效果
一款不错的JQ渐显渐隐代码
JS代码:
<script type=“text/javascript”>
jQuery(document).ready(function($) {
$(‘#table span’).hover(function() {
$(this).addClass(“on”).siblings().removeClass(“on”);
$(“#tab-content > div”).eq($(‘#table span’).index(this)).fadeIn(500).siblings().fadeOut(500);
});
});
</script>
鼠标移过切换,换点击,将hover换成click即可。 fadeIn(500),渐显,500是时间,ms!
CSS:
<style>
.table{width:320px;height:248px;overflow:hidden;margin:0 0 0 8px;border:1px solid #E6E6E6;}
.table .title{width:320px;height:28px;overflow:hidden;border-bottom:1px solid #E6E6E6;}
.table .title .one{width:160px;height:30px;line-height:30px;font-size:14px;overflow:hidden;margin:0;text-align:center;display:block;cursor:pointer}
.table .title .on{background-color:#FF5400;color:#fff;}
.table .box{width:300px;height:200px;overflow:hidden;padding:8px 10px;display:block;position:absolute;}
.table .box .li{background:url(“li-style.png”) 0 0 no-repeat;width:300px;height:200px;}
.table .box .li a{display:block;width:275px;height:20px;line-height:20px;margin-left:25px; overflow:hidden; whitewhite-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;color:#666;}
.f_l{float:left;}
</style>
CSS样式,这里注意box要给一个 position:absolute ,层进行叠加,否则切换的时候有明显的弹出效果!
html代码:
<div class=“table” id=“table”>
<div class=“title” id=“fli”>
<span class=“one f_l on” >TAB选项卡1</span>
<span class=“one f_l”>TAB选项卡2</span>
</div>
<div id=“tab-content”>
<div class=“box”>
<div class=“li”>
<a href=“//blog.32xp.com/phpstudy-mysql-450.html” title=“PHPstudy搭建本地环境修改数据库上传大小” target=“_blank”>PHPstudy搭建本地环境修改数据库上传大小</a>
<a href=“//blog.32xp.com/js-href-447.html” title=“JS,JQ获取淘点金里的淘客链接href值” target=“_blank”>JS,JQ获取淘点金里的淘客链接href值</a>
<a href=“//blog.32xp.com/adjs-445.html” title=“淘点金JS被浏览器广告过滤屏蔽” target=“_blank”>淘点金JS被浏览器广告过滤屏蔽</a>
<a href=“//blog.32xp.com/meiguorenapp-443.html” title=“美国人每天玩手机APP时间首次超过看电视” target=“_blank”>美国人每天玩手机APP时间首次超过看电视</a>
<a href=“//blog.32xp.com/wordpress-441.html” title=“外站调用wordpress文章” target=“_blank”>外站调用wordpress文章</a>
<a href=“//blog.32xp.com/wordpress-437.html” title=“解决wordpress4.2以上外观菜单无法打开显示选项” target=“_blank”>解决wordpress4.2以上外观菜单无法打开显示选项</a>
<a href=“//blog.32xp.com/php-435.html” title=“PHP替换字符串preg_replace和str_replace的区别” target=“_blank”>PHP替换字符串preg_replace和str_replace的区别</a>
<a href=“//blog.32xp.com/iphone6s-433.html” title=“9月10日凌晨1点直播苹果发布会 6s全面曝光” target=“_blank”>9月10日凌晨1点直播苹果发布会 6s全面曝光</a>
<a href=“//blog.32xp.com/jscode-431.html” title=“JS+html点击运行文本框内代码” target=“_blank”>JS+html点击运行文本框内代码</a>
<a href=“//blog.32xp.com/html5-video-427.html” title=“html5音视频播放标签video” target=“_blank”>html5音视频播放标签video</a>
</div>
</div>
<div class=“box” style=“display:none;”>
<div class=“li”>
<a href=“//blog.32xp.com/adjs-445.html” title=“淘点金JS被浏览器广告过滤屏蔽” target=“_blank”>淘点金JS被浏览器广告过滤屏蔽</a>
<a href=“//blog.32xp.com/meiguorenapp-443.html” title=“美国人每天玩手机APP时间首次超过看电视” target=“_blank”>美国人每天玩手机APP时间首次超过看电视</a>
<a href=“//blog.32xp.com/wordpress-441.html” title=“外站调用wordpress文章” target=“_blank”>外站调用wordpress文章</a>
<a href=“//blog.32xp.com/wordpress-437.html” title=“解决wordpress4.2以上外观菜单无法打开显示选项” target=“_blank”>解决wordpress4.2以上外观菜单无法打开显示选项</a>
<a href=“//blog.32xp.com/php-435.html” title=“PHP替换字符串preg_replace和str_replace的区别” target=“_blank”>PHP替换字符串preg_replace和str_replace的区别</a>
<a href=“//blog.32xp.com/iphone6s-433.html” title=“9月10日凌晨1点直播苹果发布会 6s全面曝光” target=“_blank”>9月10日凌晨1点直播苹果发布会 6s全面曝光</a>
<a href=“//blog.32xp.com/jscode-431.html” title=“JS+html点击运行文本框内代码” target=“_blank”>JS+html点击运行文本框内代码</a>
<a href=“//blog.32xp.com/html5-video-427.html” title=“html5音视频播放标签video” target=“_blank”>html5音视频播放标签video</a>
<a href=“//blog.32xp.com/phpstudy-mysql-450.html” title=“PHPstudy搭建本地环境修改数据库上传大小” target=“_blank”>PHPstudy搭建本地环境修改数据库上传大小</a>
<a href=“//blog.32xp.com/js-href-447.html” title=“JS,JQ获取淘点金里的淘客链接href值” target=“_blank”>JS,JQ获取淘点金里的淘客链接href值</a>
</div>
</div>
</div>
</div>
数据比较多,html代码比较长!
演示及下载://demo.32xp.com/demo/jstab/20150917001.html
代码
·
JS,JQ获取淘点金里的淘客链接href值
淘点金代码,是通过一段JS创建淘客链接,通过“审查元素”发现,样式都是通过JS创建的一个iframe标签,所以在提取链接的时候要到iframe里找!
能找到就好办,通过JQ查找链接。$(‘#tk’).find(“iframe”).contents().find(“a”).eq(0).attr(“href”);
完整的JS代码:
function get(){
var href = $(‘#tk’).find(“iframe”).contents().find(“a”).eq(0).attr(“href”);
if (href != undefined){
alert(href);
}
else{
alert(‘没有加载到淘点金代码,可能原因是还未加载完或浏览器启用了拦截广告功能!’);
}
}
事先引入JQ。淘点金代码放在ID=tk的DIV层中,创建一个元素,设置onlick=“get()”,点击就会弹出淘点金内的href值!
通过这里可以自行修改需要调用的href值的地方,也许,并没有实际的意义的,也许会有用处!看个人喜好!
下载://dwz.cn/1I58YP ,注意,代码需放在阿里妈妈联盟通过的网站域名下测试才会生效淘点金!
AD:32xp收费群:387295731,群内共享资源免费下载,入群费,第1~5名:88元,5~30名188元,30~100名,288元,100~500名388元,500名以后588元入群费,长期免费分享资源,技术!
代码
·
PHP替换字符串preg_replace和str_replace的区别
PHP str_replace,替换固定的值。str_replace() 函数以其他字符替换字符串中的一些字符(区分大小写)。
该函数必须遵循下列规则:
如果搜索的字符串是数组,那么它将返回数组。
如果搜索的字符串是数组,那么它将对数组中的每个元素进行查找和替换。
如果同时需要对数组进行查找和替换,并且需要执行替换的元素少于查找到的元素的数量,那么多余元素将用空字符串进行替换
如果查找的是数组,而替换的是字符串,那么替代字符串将对所有查找到的值起作用。
语法:
str_replace(find,replace,string,count)
参数 描述
find 必需。规定要查找的值。
replace 必需。规定替换 find 中的值的值。
string 必需。规定被搜索的字符串。
count 可选。对替换数进行计数的变量。
PHP preg_replace — 执行一个正则表达式的搜索和替换,根据规则进行搜索替换。
示例:
结果:
能用str_replace替换的都可以用preg_replace替换,在速度上, preg_replace要比 str_replace慢,能用 str_replace就不用 preg_replace!
代码
·
JS+html点击运行文本框内代码
代码类,代码演示类,代码修改等处使用,通过JS+Html表单输入框实现“点击运行”在浏览器中查看文本框内的代码运行效果。
JS代码:
function RunCode(txt) {
cod=document.all(txt)
var code=cod.value;
if (code!=“”){
var newwin=window.open(”,”,”); //打开一个窗口并赋给变量newwin。
newwin.opener = null // 防止代码对论谈页面修改
newwin.document.write(code); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。
newwin.document.close();
}else{
alert(“亲,对不起,您是要我运行什么啊!”); //空值时弹出
}
}
HTML代码:由一个文本框和一个点击完成
<textarea style=“width:990px;height:200px;margin:10px 0px 10px 10px;” id=“code”>
</textarea >
<div class=“run” onclick=“RunCode(‘code’)”>点击运行-查看效果</div>
点击之后就可以在浏览器中看待文本框内的效果!
演示:https://blog.32xp.com/tool/runhtml
代码
·
多参数不确定个数伪静态rewrite规则
URL伪静似乎已经很流行了,而且,URL看起来也很好看,不会有太多的“?、=、&”符号,如果有很多个参数,而且参数不确定,有时候需要传入,有时候不需要传入,如果安装常规的处理,就规则需要写几百行了,而且还容易出错。
如图,伪了竟然有200多行。经过折腾,有时候还会出错!突发奇想,能不能用一条来写?一条就可以处理这么多个页面,这么多参数的规则?
其实,换个角度,如:PHP来处理这些参数,那么规则就不需要处理这么多了!用一条就可以!先合并参数到变量V。
RewriteRule ^([a-z-_0-9]+)- ([a-z-_0-9]+) \.html$ $1.php?v=$2 [L,NC]
PHP再对v的参数进行分解处理!分解出来的结果重新分配,如ID,NAME之类即可完美解决太多参数的rewrite了!
代码
·
PHP判断远程图片是否存在
PHP判断远程图片是否存在,如果不存在则调用默认的图片,存在使用远程图片,有时候是蛮有用处的。
PHP 代码:
function check_remote_file_exists($url) {
$curl = curl_init($url);
// 不取回数据
curl_setopt($curl, CURLOPT_NOBODY, true);
// 发送请求
$result = curl_exec($curl);
$found = false;
// 如果请求没有发送失败
if ($result !== false) {
// 再检查http响应码是否为200
$statusCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
if ($statusCode == 200) {
$found = true;
}
}
curl_close($curl);
return $found;
}
判断代码:
$exists = check_remote_file_exists($img);
if (!$exists) {
echo $img.’ 这张图片不存在<br><br>’;
}else{
echo ‘<img src=“‘.$img.'”><br><br>’ ;
}
例子:
<?php
@header(‘Content-type: text/html;charset=UTF-8’);
function check_remote_file_exists($url) {
$curl = curl_init($url);
// 不取回数据
curl_setopt($curl, CURLOPT_NOBODY, true);
// 发送请求
$result = curl_exec($curl);
$found = false;
// 如果请求没有发送失败
if ($result !== false) {
// 再检查http响应码是否为200
$statusCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
if ($statusCode == 200) {
$found = true;
}
}
curl_close($curl);
return $found;
}
?>
<?php
$imgarr=array(
“//img.32xp.com/photo_20150816221103.jpg”,
“//img.32xp.com/photo_201508162211030.jpg”
);
foreach($imgarr as $img){
$exists = check_remote_file_exists($img);
if (!$exists) {
echo $img.’ 这张图片不存在<br><br>’;
}else{
echo ‘<img src=“‘.$img.'”><br><br>’ ;
}
}
?>
运行效果:
其实,这个应该也可以判断其他文件类型是否存在
代码
·
Discuz代码编辑设置
discuz中也有一个Discuz! 代码,其实就是和wordpress中的短代码差不多。
在发帖的时候,输入[标签][/标题],自动替换成需要的内容,wordpress中的短代码 [标签][/标题]是一样的。
wordpress短代码需要的是修改模版中的模版函数文件functions.php,而Discuz直接可以在后台添加编辑短代码!
登录Discuz管理后台,全局-编辑器设置- Discuz! 代码
可以随意添加,修改,添加完之后点击详情进行替换设置。
主要的就是替换内容这一块,只支持3个参数。例如下载链接,想做一个图标之类的,可以设置一个[down][/down]标签,替换内容写<a href=”{1}”><img></a>图片下载按钮!
帖子上只需写 [down]下载链接[/down]即可!
discuz代码。有时候能方便很多,主要是对代码进行简写,后台替换!
代码
·
discuz外部登录PHP代码
折腾了一天,改好了一个discuz外部登录框的代码
度娘告知的外部登录discuz的代码大多都是用post进行提交,然后是定时刷新实现登录,度娘中比较满意的是一个点击弹出登录框代码
直接JS调用弹出登录框,注册框,和找回密码,登录框和注册框提交之后都可以返回到首页,找回密码返回到的是论坛,可能需要修改下模版文件吧
代码:
<a href=“javascript:;” onclick=“showWindow(‘login’, ‘member.php?mod=logging&action=login’);hideWindow(‘register’); “>登录</a>
<a href=“javascript:;” onclick=“showWindow(‘register’, ‘member.php?mod=register’);hideWindow(‘login’);”>注册</a>
<a href=“javascript:;” onclick=“showWindow(‘login’, ‘member.php?mod=logging&action=login&viewlostpw’);hideWindow(‘register’); “>找回密码</a>
另外一个就是有输入框的代码,这个是直接从Discuz论坛上直接抠下来的代码,应该是ajax提交判断
登录的时候无刷新更新
代码,直接从源码那里抠下来的
<script type=“text/javascript”>var STYLEID = ‘1’, STATICURL = ‘static/’, IMGDIR = ‘static/image/common’, VERHASH = ‘F2a’, charset = ‘utf-8’, discuz_uid = ‘0’, cookiepre = ‘YuWK_2132_’, cookiedomain = ”, cookiepath = ‘/’, showusercard = ‘1’, attackevasive = ‘0’, disallowfloat = ‘newthread’, creditnotice = ‘1|威望|,2|金钱|,3|贡献|’, defaultstyle = ”, REPORTURL = ‘aHR0cDovL2IuMzJ4cC5jb20vYmJzL2ZvcnVtLnBocA==’, SITEURL = ‘http://b.32xp.com/bbs/’, JSPATH = ‘static/js/’, CSSPATH = ‘data/cache/style_’, DYNAMICURL = ”;</script>
<script src=“static/js/common.js?F2a” type=“text/javascript”></script>
<script src=“static/js/logging.js?F2a” type=“text/javascript”></script>
<form method=“post” autocomplete=“off” id=“lsform” action=“member.php?mod=logging&action=login&loginsubmit=yes&infloat=yes&lssubmit=yes” onsubmit=“return lsSubmit();”>
<span id=“return_ls” style=“display:none”></span>
<table cellspacing=“0” cellpadding=“0” width=“806”>
<tr>
<td width=“75”>
<span class=“ftid”>
<select name=“fastloginfield” id=“ls_fastloginfield” width=“40” tabindex=“900”>
<option value=“username”>用户名</option>
<option value=“email”>Email</option>
</select>
</span>
<script type=“text/javascript”>simulateSelect(‘ls_fastloginfield’)</script>
</td>
<td width=“154”><input type=“text” name=“username” id=“ls_username” autocomplete=“off” class=“px vm” tabindex=“901” /></td>
<td class=“fastlg_l” width=“118”><label for=“ls_cookietime”><input type=“checkbox” name=“cookietime” id=“ls_cookietime” class=“pc” value=“2592000” tabindex=“903” />自动登录</label></td>
<td>密码:</td>
<td width=“161”><input type=“password” name=“password” id=“ls_password” class=“px vm” autocomplete=“off” tabindex=“902” /></td>
<td width=“90”><button type=“submit” class=“pn vm” tabindex=“904” style=“width: 75px;”><em>登录</em></button></td>
<td width=“160”> <a href=“javascript:;” onclick=“showWindow(‘login’, ‘member.php?mod=logging&action=login&viewlostpw=1’)”>找回密码</a> <a href=“member.php?mod=register” class=“xi2 xw1”>立即注册</a></td>
</tr>
</table>
<input type=“hidden” name=“quickforward” value=“yes” />
<input type=“hidden” name=“handlekey” value=“ls” />
</form>
实现登录功能,以上两种都是直接登录论坛的,和整合的应该不大一样吧。
获取登录用户信息可以用
class_core.php
代码:
require ‘./source/class/class_core.php’;
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象
$discuz->cachelist = $cachelist;
$discuz->init();//以上是调用discuz公共执行类等核心代码
//$_G[‘username’];
信息量很大的,可以慢慢找!
代码
·
Discuz3.2登录UCenter没反应的解决方案
最近安装了dicuz3.2的论坛程序,登录UCenter中心的时候,一直没有反应,测试故意填写错误的密码或者验证码都会有提示密码或者验证码输入错误,正确填写之后点击又没有了反应
百度了下,修改uc_server\model\admin.php第22行就可以登录了!
打开uc_server/model/admin.php
找到第22行的
$this->cookie_status = 0;
改成
$this->cookie_status = isset($_COOKIE[‘sid’]) ? 1 : 0;
修改之后就可以正常登录UCenter中心了!
代码
·
JS逐条向上滚动代码
JS逐条向上滚动代码,这种效果,或许现在都很少用到了。原理是复制层向上滚动。
CSS:
.box{font-size:14px;text-align:left;overflow:hidden;height:30px;line-height:30px;width:200px;border:1px solid #e4e4e4;}
.box ul{margin:0px;overflow:hidden;width:300px;}
.box li{ list-style-type:none; }
.box a{height:30px;width:350px;line-height:30px;overflow:hidden;}
HTML:
<div class=“box” id=“marqueebox”>
<ul>
<li><a href=“//www.32xp.com” target=“_blank”>第一条</a></li>
<li><a href=“//www.32xp.com” target=“_blank”>第二条</a></li>
<li><a href=“//www.32xp.com” target=“_blank”>第三条</a></li>
<li><a href=“//www.32xp.com” target=“_blank”>第四条</a></li>
</ul>
</div>
JS:
<script type=“text/javascript”>
function startmarquee(lh,speed,delay,index){
var t;
var p=false;
var o=document.getElementById(“marqueebox”);
o.innerHTML+=o.innerHTML;
o.onmouseover=function(){p=true}
o.onmouseout=function(){p=false}
o.scrollTop = 0;
function start(){
t=setInterval(scrolling,speed);
if(!p){ o.scrollTop += 1;}
}
function scrolling(){
if(o.scrollTop%lh!=0){
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(30,30,3000,0);
</script>
演示://2.jspintu.sinaapp.com/dome/jsup.html
代码
·
纯DIV+CSS弹出导航菜单代码-鼠标移过弹出层
鼠标移过弹出层,不是很必要的时候,直接加一个:hover的CSS属性就可以。
鼠标移过弹出导航菜单CSS+DIV代码,对弹出层做一个display:none,鼠标移过时设置属性display:block;
纯DIV+CSS弹出菜单
用onmouseover=”this.style.display=’block’;document.getElementById(‘3′).className=’curr’;”去调用CSS样式
完整代码:
CSS:
.div{width:1000px;padding:50px 100px;margin:0 auto;}
.div .nav{width:1000px;margin:0 auto;}
.div .nav .display{width:120px;border:1px solid #FF5400;height:140px; position:absolute;margin-left:120px;background-color:#FFF;z-index:999;display:none;}
.div .nav .display .li{width:120px;height:30px;border-bottom:1px solid #e4e4e4;line-height:30px;}
.div .nav .display .li a{text-decoration:none;color:#000;display:block;width:120px;height:30px;text-indent:5px;}
.div .nav .display .li a:hover{background-color:#33A600;color:#fff;}
.div .nav .list{width:120px;padding:0px;border:1px solid #e4e4e4;height:140px;}
.div .nav .list .curr{background-color:#FF5400;color:#fff;}
.div .nav .list .curr .li a{color:#fff;}
.div .nav .list .li{width:120px;height:30px;border-bottom:1px solid #e4e4e4;line-height:30px;}
.div .nav .list .li:hover{background-color:#33A600;color:#fff;}
.div .nav .list .li a,.div .nav .list .lis a{text-decoration:none;color:#000;display:block;width:120px;height:30px;text-indent:5px;}
.div .nav .list .li a:hover{color:#fff;}
.div .nav .list .lis{width:120px;height:30px;line-height:30px;}
HTML:
<div class=“div”>
<div class=“nav”>
<div class=“display” id=“d1” onmouseover=“this.style.display=’block’;document.getElementById(‘1′).className=’curr’;” onmouseout=“this.style.display=’none’;document.getElementById(‘1’).className=”;”>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>1、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>1、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>1、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>1、二级菜单</a></div>
</div>
<div class=“display” id=“d2” onmouseover=“this.style.display=’block’;document.getElementById(‘2′).className=’curr’;” onmouseout=“this.style.display=’none’;document.getElementById(‘2’).className=”;”>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>2、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>2、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>2、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>2、二级菜单</a></div>
</div>
<div class=“display” id=“d3” onmouseover=“this.style.display=’block’;document.getElementById(‘3′).className=’curr’;” onmouseout=“this.style.display=’none’;document.getElementById(‘3’).className=”;”>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>3、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>3、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>3、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>3、二级菜单</a></div>
</div>
<div class=“display” id=“d4” onmouseover=“this.style.display=’block’;document.getElementById(‘4′).className=’curr’;” onmouseout=“this.style.display=’none’;document.getElementById(‘4’).className=”;”>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>4、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>4、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>4、二级菜单</a></div>
<div class=“li”><a href=“//www.32xp.com” target=“_blank”>4、二级菜单</a></div>
</div>
<div class=“list”>
<div id=“1”>
<div class=“li” id=“l1” onmouseover=“document.getElementById(‘d1′).style.display=’block’;” onmouseout=“document.getElementById(‘d1′).style.display=’none’;”><a href=“//www.32xp.com” target=“_blank”>菜单</a></div>
</div><div id=“2”>
<div class=“li” id=“l2” onmouseover=“document.getElementById(‘d2′).style.display=’block’;” onmouseout=“document.getElementById(‘d2′).style.display=’none’;”><a href=“//www.32xp.com” target=“_blank”>菜单</a></div>
</div><div id=“3”>
<div class=“li” id=“l3” onmouseover=“document.getElementById(‘d3′).style.display=’block’;” onmouseout=“document.getElementById(‘d3′).style.display=’none’;”><a href=“//www.32xp.com” target=“_blank”>菜单</a></div>
</div><div id=“4”>
<div class=“li” id=“l4” onmouseover=“document.getElementById(‘d4′).style.display=’block’;” onmouseout=“document.getElementById(‘d4′).style.display=’none’;”><a href=“//www.32xp.com” target=“_blank”>菜单</a></div>
</div>
</div>
</div>
</div>
演示地址://2.jspintu.sinaapp.com/dome/navcss.html
代码
·
php提取关键词/标题分词API
记得之前写过DZ提取关键词的API,返回的是XML,今天打包下代码,返回json,顺便写下调用代码
API://32xp.sinaapp.com/api/fc.php
参数:t
编码:utf-8
返回:get ,JSON
代码:
<?php
$title=“php中计算中文字符串长度、截取中文字符串的函数代码”; //php 标题参数
$com=@file_get_contents(“//32xp.sinaapp.com/api/fc.php?t=“.$title);
$json=json_decode($com);
if($json[0]->eorr){
echo “没有词”;
}else{
$k=“关键词:”;
foreach($json as $kw){
$k.=$kw->kw.“,”;
}
$k=rtrim($k,’,’);
echo $k;
}
?>
返回:关键词:字符串,中文
封装代码:
<?php
function fenci($title){
$com=@file_get_contents(“//32xp.sinaapp.com/api/fc.php?t=”.$title);
$json=json_decode($com);
if($json[0]->eorr){
echo “没有词”;
}else{
$k=“关键词:”;
foreach($json as $kw){
$k.=$kw->kw.“,”;
}
$k=rtrim($k,’,’);
}
return $k;
}
?>
调用:
<?php echo fenci(“截取字符串的函数代码”);?>
返回:关键词:字符串,中文
代码
·
大数据SQL随机查询
PHP SQL随机查询数据小的话还是用rand() 比较方面。如果数据太多的话,可以建立临时附表查询。或者用join链接。rand()在大数据上有很大的概率就直接挂掉!
$sql1 = “SELECT * FROM `表名` AS t1 JOIN (SELECT ROUND(RAND() * ((SELECT MAX(id) FROM `表名`)-(SELECT MIN(id) FROM `表名`))+(SELECT MIN(id) FROM `表名`)) AS id) AS t2 WHERE t1.id >= t2.id ORDER BY t1.id LIMIT 1”;
添加下具体查询更会提高速度
$sql1 = “SELECT `具体字段` FROM `表名` AS t1 JOIN (SELECT ROUND(RAND() * ((SELECT MAX(id) FROM `表名`)-(SELECT MIN(id) FROM `表名`))+(SELECT MIN(id) FROM `表名`)) AS id) AS t2 WHERE t1.id >= t2.id ORDER BY t1.id LIMIT 1”;
不过,如果查询多条的话,数组和SQL直接取出的还是有点区别!就因为这个问题折腾了不少时间!
多条出来的数组类似:
array(
[0]=>array(
[id]=>id
[0]=>id
[name]=>name
[1]=>name
[2]=>id
)
[1]=>array(
[id]=>id
[0]=>id
[name]=>name
[1]=>name
[2]=>id
)
)
取值方面不大好取。如果用这段建议还是先print一下看看数组的格式在决定怎么取具体值!
代码
·
PHP随机取出不重复数字
有时需要不重复的数字,不管用于什么用途。我是写在随机抽取数据库里的数据,因为有几十万条的数据,随机抽取总会出点问题。不是连续太多就是超出,再且用rand()效率 也出错。join 总是出现很多连续的。就找了一个随机ID然后where in 来取出数据,这个主要ID 要连续的。要不然会出空值。我要随机100个,我就取出1000个,然后在选100个。
<?php
function createRandID($s,$e,$n){
// 注意,要先声明一个空数组,否则while里的in_array会报错
$arr = array();
// 使用while循环,只要不够N个就永远循环
while(count($arr)<=$n){
// 产生一个随机数
$a = rand($s,$e);
// 判断:如果产生的随机数不再数组里就赋值到数组里
// 主要避免产生重复的数字
if(!in_array($a,$arr)){
// 把随机数赋值到数组里
$arr[] = $a;
}
}
// 返回产生的随机数字
return implode($arr,’,’);
}
echo createRandID(1,100,5); //实例,从1~100内取出5个不重复的随机数字
?>
这个随机数代码,效率还不错!
说明:$s:起始数,$e:结束数,$n:取出个数
代码
·
H1的CSS样式解决占用一行的问题
H1标签的作用-网站建设,H1标签是在网站制作过程中,经常用到的一个标签,他的作用仅次于Title,在seo方面,这个标签还有H2,H3,这些标签用好了,对网站的优化会有事半功倍的效果。
H标签都是占用一行的。有时候,我们又不像让H标签占用一行!可以用CSS来限制
CSS:display:inline; width:auto;
对应的效果:
代码
·
PHP返回200定时跳转
php定时跳转我们需要利用header函数输入html或js代码来实现定时跳转,JS和meta http-equiv=定时跳转HTTP的返回码是200.
PHP定时跳转代码:
<?php
header(“refresh:3;url=//blog.32xp.com”);
echo ‘3秒后自动跳转到零分博客~~~’;
?>
输出代码如同:
<meta http-equiv=“refresh” content=“3; url=//blog.32xp.com”>
HTTP的返回码都是200
代码
·
DZ论坛程序删除帖间下方广告AD小图标
DZ帖子下方的广告总会出现一个AD的小图标,占用了20px的左侧空间。看着总是很不舒服
这个小图标是经过CSS背景插入的,删除它修改下css就可以。
CSS文件:/template/default/common/文件夹下的common.css。
打开,查找“帖内广告”,找到.a_pb { background: url({IMGDIR}/ad.gif) no-repeat 0 50%; 删除background: url({IMGDIR}/ad.gif) no-repeat 0 50%;这一段,后面的padding-left: 20px;修改为padding-left: 0px;
修改后的样子:
.a_pb { margin-bottom: 6px; padding-left: 0px; zoom: 1; }
这样,看着就舒服多了!
代码
·
php file 与 file_get_contents函数
简单的讲:
file读取文件以数组形式返回,file_get_contents读取文件以字符串形式返回!
比如读取一个data.txt的文本文件。
<?php
$file=file(“data.txt”);
$file_get_contents=file_get_contents(“data.txt”);
echo “file 数组,一行一个!<br><br>”;
print_r($file);
echo “<br><hr>file_get_contents,字符串。<br><br>”;
print_r($file_get_contents);
?>
输出:
file 数组,一行一个!
Array ( [0] => 第一行 [1] => 第二行 [2] => 第三行 )
file_get_contents,字符串。
第一行 第二行 第三行
图:
如果以txt做数据的话,utf-8编码要把txt也保存为utf-8的文本文件!
代码
·
简单JS实现table选项卡切换
JS选项卡切换,其实,说穿了就是JS来控制选项卡的CSS样式,和内容DIV的显示和隐藏,我的代码都是比较随意,希望能比较好理解。
JS代码:
<script language=javascript>
function check(n){
var c=document.getElementById(“div”).getElementsByTagName(“span”).length;
var v=document.getElementById(“div”).getElementsByTagName(“span”);
for(i=0;i<c;i++){
v[i].className=“”;
document.getElementById(“t”+i).style.display=“none”;
}
v[n].className=“check”;
document.getElementById(“t”+n).style.display=“block”;
}
</script>
CSS:
<style>
.div{width:500px;margin:10px auto;border:1px solid #666}
.div .nav{width:500px;height:20px;margin:0px;border-bottom:1px solid #666}
.div .nav span{width:100px;height:20px;margin:0;line-height:20px;float:left;display:block;border-right:1px solid #666;background-color: #fff;text-align:center;cursor:pointer}
.div .nav .check{height:21px;margin-top:-2px;border-top:2px solid #ff0000;background-color: #fff;}
.content{margin:10px;height:50px;width:500px;display:block;}
.clear{clear:both; float:none;}
</style>
HTML:
<div id=“div” class=“div”>
<div class=“nav”>
<span class=“check” onclick=“check(0)”>选项卡1</span>
<span onclick=“check(1)”>选项卡2</span>
<span onclick=“check(2)”>选项卡3</span>
<span onclick=“check(3)”>选项卡4</span>
<div class=“clear”></div>
</div>
<div class=“content”>
<div id=“t0” style=“display:block”>选项卡1的内容</div>
<div id=“t1” style=“display:none”>选项卡2的内容</div>
<div id=“t2” style=“display:none”>选项卡3的内容</div>
<div id=“t3” style=“display:none”>选项卡4的内容</div>
</div>
</div>
演示://2.jspintu.sinaapp.com/dome/jsTable/
代码
·
Zero零分
站龄16年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
476
文章 26
评论 27
分类 839
标签 7
友链
文章 26
评论 27
分类 839
标签 7
友链
百度广告
最近更新
- 01 微信小程序scroll-view下拉刷新,出现一直刷新
- 02 微信小程序scroll-view禁止滚动条
- 03 微信小程序开发新版本检测、网络请求、json格式判断封装
- 04 利用Fiddler抓包工具下载微信视频号视频
- 05 整理了一张吴宗宪专辑无损CD《无尽的爱》APE格式音频
- 06 百度AI语音演示接口后获取的音频流处理
- 07 Win7 安装pr2018(AdobePremiereCC2018)记录说明
- 08 win7无法查看gif动画图解决插件Image_Viewer_for_Windows_7
- 09 win7 视频无法预览图片(文件夹内不显示略缩图)
- 10 微信小程序解决上滑多次加载重复内容的问题
热门推荐
最新评论
标签云
微信小程序
小程序开发
视频下载
Fiddler
微信视频号
无损CD
无尽的爱
吴宗宪
文字转语音
百度ai
pr2018
win7
Image Viewer for Windows 7
win7查看GIF
视频预览图片
视频略缩图
视频解码器
fireworks
水星
移动热点
ps ico
ps插件
foreach
php
保存远程图片
登录过期
phpmyadmin
扩展屏
多显示器
自动登陆
netplwiz
CSS动画
wordpress图片
sitemap
无线端
调试
a标签
P标签
calc
justify
pycharm
Python
相邻文章
logo
赵薇
html
win11
Windows
扫黑风暴
我的饭店
淘花
游艇
港姐
周星驰
unisoc
荣耀paly5
信用卡
AI机器人
华智冰
小冰