javascript的Document 对象方法

 

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

getElementsByClassName()通过类名查找 HTML 元素

querySelectorAll()通过 CSS 选择器查找 HTML 元素

getElementsByClassName()不适用于 Internet Explorer 8 及其更早版本。

querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。

例子

<div id="main">

<p id="intro" class="intro">Hello World!</p>

</div>

 

var x = document.getElementById("intro");

 

var x = document.getElementsByTagName("p");

 

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

 

var x = document.getElementsByClassName("intro");

 

var x = document.querySelectorAll("p.intro");

 

请注意,只有getElementById()中Element是单数,获取的是一个对象.其余的都是获取对象集合

jQuery版页面滚动元素动画插件aos.js

aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。

开源地址:https://github.com/michalsnik/aos

安装
可以通过bower来安装aos动画库插件。
bower install aos --save
使用方法
在页面中引入aos.css文件,jquery和aos.js文件
<link rel="stylesheet" href="dist/aos.css" />
<script src="js/jquery.min.js"></script>
<script src="dist/aos.js"></script>
HTML结构
要使用aos动画库,你需要做的就是在需要动画的元素上添加aos属性,例如:
<div aos="animation_name">
aos脚本将会在页面滚动时,在该元素上触发相应的动画。

在元素上还可以添加以下一些属性:

属性 属性 属性 默认值
aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120
aos-duration 动画持续时间 600 400
aos-easing 动画的easing动画效果 ease-in-sine ease
aos-delay 动画的延迟时间 300 0
aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null
aos-anchor-placement 锚位置,触发动画时元素位于屏幕的位置 top-center top-bottom
aos-once 动画是否只会触发一次,或者每次上下滚动都会触发 true false

注意,aos-duration的动画持续时间的范围从50-3000毫秒,如果你想设置更大的值,可以在页面中添加下面的CSS代码:
body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{
transition-duration: 4000ms;
}
上面的代码将动画的持续时间修改为4000毫秒。

示例代码:
<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600">
<div aos="flip-left" aos-delay="100" aos-anchor=".example-selector">
<div aos="fade-up" aos-anchor-placement="top-center">
如果你担心HTML5校验的问题,可以为上面的属性添加data-前缀。
<div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine">
全局配置
如果你不想单独每个元素做一个动画配置,你可以通过init()方法来统一配置所有元素的动画效果。
AOS.init({
offset: 200,
duration: 600,
easing: 'ease-in-sine',
delay: 100,
});
额外配置
AOS提供了2个额外的配置方法,这些方法只能够在初始化时使用。

配置 描述 示例值 默认值
disable AOS被禁用的条件 mobile false
startEvent AOS被初始化的事件名称 exampleEvent DOMContentLoaded

禁用AOS:

如果你项在小屏幕设备中禁用AOS,可以:
AOS.init({
disable: 'mobile'
});
你可以传入3种设备的类型:mobile、phone或tablet。

你也可以设置自己的禁用条件,例如在屏幕小于1024像素时禁用AOS:
disable: window.innerWidth < 1024
或者传入一个函数,返回true或false。
disable: function () {
var maxWidth = 1024;
return window.innerWidth < maxWidth;
}
开始动画的事件:
如果你不想滚动动画从页面加载(DOMContentLoaded)后就开始执行,可以使用startEvent来设置自己的事件,AOS会在document上监听这个事件:
AOS.init({
startEvent: 'someCoolEvent'
});
API
AOS对象有2个可用的方法:

init

refresh
AOS.refresh();
上面的代码会重新计算元素的位置和偏移。

动画和锚位置
动画

淡入淡出动画:

fade-up

fade-down

fade-left

fade-right

fade-up-right

fade-up-left

fade-down-right

fade-down-left

翻转动画:

flip-up

flip-down

flip-left

flip-right

滑动动画:

slide-up

slide-down

slide-left

slide-right

缩放动画:

zoom-in

zoom-in-up

zoom-in-down

zoom-in-left

zoom-in-right

zoom-out

zoom-out-up

zoom-out-down

zoom-out-left

zoom-out-right

锚位置

top-bottom

top-center

top-top

center-bottom

center-center

center-top

bottom-bottom

bottom-center

bottom-top

easing动画

你可以使用以下的一些easing动画效果:

linear

ease

ease-in

ease-out

ease-in-out

ease-in-back

ease-out-back

ease-in-out-back

ease-in-sine

ease-out-sine

ease-in-out-sine

ease-in-quad

ease-out-quad

ease-in-out-quad

ease-in-cubic

ease-out-cubic

ease-in-out-cubic

ease-in-quart

ease-out-quart

ease-in-out-quart

php 判断字符串是英文还是汉字还是英汉混合

php 判断字符串是英文还是汉字还是英汉混合

 

 

/*
		 * 判断给定字符串是
		 * 纯英文:ENGLISH
		 * 纯汉字:CHINESE
		 * 英汉混合:MIXTURE
		 */
		private function EnglishOrChinese($str){
		    $mb = mb_strlen($str,'utf-8');
		    $st = strlen($str);
		    if($st==$mb)
		        return ENGLISH;		//'纯英文';
		    if($st%$mb==0 && $st%3==0){
		        return CHINESE;		//'纯汉字';
		    }
		    else{
		    	return MIXTURE;		//'汉英混合';
		    }
		}

 

需要注意的是,mb_strlen并不是PHP核心函数,使用前需要确保在php.ini中加载了php_mbstring.dll,即确保

“extension=php_mbstring.dll”这一行存在并且没有被注释掉,否则会出现未定义函 数的问题。

 

 

参考

https://blog.csdn.net/carrousel0516/article/details/90229209

https://www.cnblogs.com/ryanzheng/p/8285113.html

 

 

 

css进度条简易实现方法

 

 

css进度条


<style>
progress{
    -webkit-appearance: none;
    height:2px;
    width:30px;
}
::-webkit-progress-bar{
    /* 获取progress */
    background-color: orange;
    /* 进度条未被填充的背景颜色 */
}
::-webkit-progress-value {
    background-color: rgb(43, 255, 0);
    /* 进度条被填充部分的背景颜色 */
}
::-webkit-progress-inner-element {
    border: 0px solid black;
    /* 进度条的内边框,注意跟outline区分 */
}
</style>
<script>
window.onload=function staticProgress () {
  var pg = document.getElementById('pg')
  var timer = setInterval(function () {
    if (pg.value !== 100) {
      pg.value++
    } else {
      clearInterval(timer)
    }
  }, 15)
}
</script>
<progress max="100" value="0" id="pg"></progress>

 

其中100为进度条最终到达百分比

15为1.5秒走完进度.

 

 

 

 

 

css中设置display:inline-block造成换行间距的解决方法

原因

 

因要做导航菜单,logo也同在一行,使用display:inline-block进行操作.出现间距,常用方法无法清除.

经过网上查询,使用了一个最简单的方法.

在上级元素中设置
font-size:0;/*清除使用inline-block造成换行符间隙*/
-webkit-text-size-adjust:none;/*清除换行间隔*/

 

然后子级元素记得设置文字大小.

成功解决

作一下记录.

 

PHP实现自动锚文本

核心代码

public function setAnchors($str,$anchors)
{
    $rule = "/<img.*>/";
    //先把img排除掉,并且将其存为一个数组
    preg_match_all($rule, $str, $matches);
    $str_without_alt = preg_replace($rule, 'Its_Just_A_Mark', $str);
    //锚处理
    foreach ($anchors as $anchor) {
        $rule = "/".$anchor['anchor_name']."(?!((?!<ab)[sS])*</a>)/";
        $href = '<a href="'.$anchor['anchor_url'].'" class = "seo-anchor">'.$anchor['anchor_name'].'</a>';
        $str = preg_replace($rule, $href, $str,$anchor['anchor_num']);
    }
    //将img加上去
    foreach ($matches[0] as $alt_content) {
        preg_replace('/Its_Just_A_Mark/',$alt_content,$str,1);
    }
    return $str;
}

 

说明,这个代码中的正则有问题

$rule = "/".$anchor['anchor_name']."(?!((?!<ab)[sS])*</a>)/";

需要修改一下

 

$rule = ''(?!((<.*?)|(<a.*?)))(' . $anchor['anchor_name'] . ')(?!(([^<>]*?)>)|([^>]*?</a>))'si';

 

来源:https://www.jianshu.com/p/d21fb675fb5e

 

更新:

/*

$zh_CN 判断是否中文

$ignorecase 是否忽略大小写

preg_quote转义正则表达式字符

 

*/

if ($ignorecase) $case = "i"; else $case="";
$cleankeyword = preg_quote($cleankeyword,''');

if ($zh_CN)
$regEx = ''(?!((<.*?)|(<a.*?)))(' . $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))'s' . $case;
elseif (strpos( $cleankeyword , ''')>0)
$regEx = ''(?!((<.*?)|(<a.*?)))(' . $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))'s' . $case;
else
$regEx = ''(?!((<.*?)|(<a.*?)))(b'. $cleankeyword . 'b)(?!(([^<>]*?)>)|([^>]*?</a>))'s' . $case;

 

适用于wordpress的函数,来自wp_keyword_link插件

function wp_keywordlink_replace($content,$iscomments)
{
	 global $wp_keywordlinks;
     $links = $wp_keywordlinks; 

	$the_global_options = get_option(WP_GLOBAL_OPTION);
	if($the_global_options){
		list($match_num_from, $match_num_to, $link_itself, $ignore_pre, $ignore_page) = explode("|", $the_global_options);
	}else{
		$match_num_from = 2;
		$match_num_to = 3;
		$link_itself = 0;
		$ignore_pre = 0;
		$ignore_page =1;
	}

     if ($links)
	 	 foreach ($links as $keyword => $details)
		 {
			   list($link,$nofollow,$firstonly,$newwindow,$ignorecase,$isaffiliate,$docomments,$zh_CN,$desc) = explode("|",$details);
			   
				// If this keyword is not tagged for replacement in comments we continue
				if ($iscomments && $docomments==0)
					continue;

				//如果是链接本身,则跳过.
				if($link_itself){
					$recent_url = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];
					if($link == $recent_url)
						continue;
				}
			   
				//跳过Page页面
				if( $ignore_page && is_page() )
					continue;

			   $cleankeyword = stripslashes($keyword); 

			   if(!$desc){ $desc = $cleankeyword; }
			   $desc = addcslashes($desc, '$');
		 		if ($isaffiliate)
		 		   // $url  = "<span class='wp_keywordlink_affiliate'>";
		 		$url  = "";

		 		else
		 			// $url  = "<span class='wp_keywordlink'>";
		 		$url  = "";
		 			
		 	   $url .= "<a href="$link" title="$desc"";

				if ($nofollow) $url .= ' rel="nofollow"';
				if ($newwindow) $url .= ' target="_blank"';
		 	   
		 	   $url .= ">".addcslashes($cleankeyword, '$')."</a>";
		 	   // $url .= "</span>";
		 	   
				if ($firstonly) $limit = 1; else $limit= rand($match_num_from,$match_num_to);
				if ($ignorecase) $case = "i"; else $case="";

				// The regular expression comes from an older 
				// auto link plugin by Sean Hickey. It fixed the autolinking inside a link
				// problem. Thanks to [Steph] for the code.

		// we don't want to link the keyword if it is already linked.
		// so let's find all instances where the keyword is in a link and change it to &&&&&, which will be sufficient to avoid linking it. We use //&&&&&, since WP would pass that
        // the idea is come from 'kb-linker'
				  $ex_word = preg_quote($cleankeyword,''');
				  //ignore pre & ignore_keywordlink
			      if( $num_2 = preg_match_all("/<wp_nokeywordlink>.*?</wp_nokeywordlink>/is", $content, $ignore_keywordlink) )
					  for($i=1;$i<=$num_2;$i++)
						  $content = preg_replace( "/<wp_nokeywordlink>.*?</wp_nokeywordlink>/is", "%ignore_keywordlink_$i%", $content, 1);
				  if($ignore_pre){
					  if( $num_1 = preg_match_all("/<pre.*?>.*?</pre>/is", $content, $ignore_pre) )
						  for($i=1;$i<=$num_1;$i++)
							  $content = preg_replace( "/<pre.*?>.*?</pre>/is", "%ignore_pre_$i%", $content, 1);
				  }

                  //$content = preg_replace( '|(<a[^>]+>)(.*)('.$ex_word.')(.*)(</a[^>]*>)|U', '$1$2%&&&&&%$4$5', $content);
				  $content = preg_replace( '|(<img)([^>]*)('.$ex_word.')([^>]*)(>)|U', '$1$2%&&&&&%$4$5', $content);

        
				// For keywords with quotes (') to work, we need to disable word boundary matching
				$cleankeyword = preg_quote($cleankeyword,''');

				if ($zh_CN)
					$regEx = ''(?!((<.*?)|(<a.*?)))(' . $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))'s' . $case;
                elseif (strpos( $cleankeyword  , ''')>0)
				    $regEx = ''(?!((<.*?)|(<a.*?)))(' . $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))'s' . $case;
				else
    				 $regEx = ''(?!((<.*?)|(<a.*?)))(b'. $cleankeyword . 'b)(?!(([^<>]*?)>)|([^>]*?</a>))'s' . $case;	
				
				$content = preg_replace($regEx,$url,$content,$limit);

	//change our '%&&&&&%' things to $cleankeyword.
	##$content = str_replace( '%&&&&&%', $zn_word, $content);
	$content = str_replace( '%&&&&&%', stripslashes($ex_word), $content);

    //ignore pre & ignore_keywordlink
	if($ignore_pre){
		for($i=1;$i<=$num_1;$i++){
			$content = str_replace( "%ignore_pre_$i%", $ignore_pre[0][$i-1], $content);
		}
	}
	for($i=1;$i<=$num_2;$i++){
		$content = str_replace( "%ignore_keywordlink_$i%", $ignore_keywordlink[0][$i-1], $content);
	}
	}// end if($links)
	return $content; 
}

 

 

 

 

 

 

宝塔面板释放内存bash

 

 

位置 /www/server/panel/script/rememory.sh

 

 

#!/bin/bash
PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin
export PATH
#+------------------------------------
#+ 宝塔释放内存脚本
#+------------------------------------

endDate=`date +"%Y-%m-%d %H:%M:%S"`
log="释放内存!"
echo "★[$endDate] $log"
echo '----------------------------------------------------------------------------'

if [ -f "/etc/init.d/php-fpm-52" ];then
	/etc/init.d/php-fpm-52 reload
fi

if [ -f "/etc/init.d/php-fpm-53" ];then
	/etc/init.d/php-fpm-53 reload
fi

if [ -f "/etc/init.d/php-fpm-54" ];then
	/etc/init.d/php-fpm-54 reload
fi

if [ -f "/etc/init.d/php-fpm-55" ];then
	/etc/init.d/php-fpm-55 reload
fi

if [ -f "/etc/init.d/php-fpm-56" ];then
	/etc/init.d/php-fpm-56 reload
fi

if [ -f "/etc/init.d/php-fpm-70" ];then
	/etc/init.d/php-fpm-70 reload
fi

if [ -f "/etc/init.d/php-fpm-71" ];then
	/etc/init.d/php-fpm-71 reload
fi

if [ -f "/etc/init.d/php-fpm-72" ];then
	/etc/init.d/php-fpm-72 reload
fi

if [ -f "/etc/init.d/php-fpm-73" ];then
	/etc/init.d/php-fpm-73 reload
fi

if [ -f "/etc/init.d/php-fpm-74" ];then
	/etc/init.d/php-fpm-74 reload
fi

if [ -f "/etc/init.d/mysqld" ];then
	/etc/init.d/mysqld reload
fi

if [ -f "/etc/init.d/nginx" ];then
	/etc/init.d/nginx reload
fi

if [ -f "/etc/init.d/httpd" ];then
	/etc/init.d/httpd graceful
fi

if [ -f "/etc/init.d/pure-ftpd" ];then
	pkill -9 pure-ftpd
	sleep 0.3
	/etc/init.d/pure-ftpd start 2>/dev/null
fi

sync
sleep 2
sync
echo 3 > /proc/sys/vm/drop_caches

echo '----------------------------------------------------------------------------'

 

 

 

 

 

 

CSS3 box-sizing 属性

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

 

兼容性写法

 

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

背景透明文字不透明的例子

 

背景透明文字不透明的例子

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明,文字不透明</title>
<style>
*{
    padding: 0;
    margin: 0;
}

body{
  padding: 50px;
  background: url(img/bg.png) 0 0 repeat;
}

.demo{
  padding: 25px;
  background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.demo p{
  color: #FFFFFF;
}
@media screen,screen9 {/* 只支持IE6、7、8 */
  .demo{
    background-color:#000000;
    filter:Alpha(opacity=50);
    position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
    *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
  }
  .demo p{
    position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
  }  
}

</style>
</head>
<body>    

<div class="demo">
    <p>背景透明,文字不透明</p>
</div>

</html>

 

来源 https://www.cnblogs.com/PeunZhang/p/4089894.html

 

另一个简单方法

 

背景透明,文字不透明,兼容IE,栗如:
非IE:background:rgba(0,0,0,0.5);
IE:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
rgba 和IE下filter数值的转换rgba 透明值	IE filter值
0.1	19
0.2	33
0.3	4C
0.4	66
0.5	7F
0.6	99
0.7	B2
0.8	C8
0.9	E5
转换公式:alpha*255再转换成16进制即可

 

 

 

wdoyo手机站实现方法

1.下载类库文件 Mobile_Detect.php
下载地址:https://github.com/serbanghita/Mobile-Detect

上传Mobile_Detect.php到/include/class

2.打开根目录下config.php

在最下面添加以下代码

//检测移动设备登录,调用手机模板,动态浏览

require(DOYO_PATH."/class/Mobile_Detect.php");//检测手机设备类库

$detect = new Mobile_Detect();

if($detect->isMobile() && !$detect->isTablet())

{

foreach ($doyoConfig as $key=>$value) {

$doyoConfig[$key]['view_themes'] = 'wap';//手机模板

$doyoConfig[$key]['site_html'] = 0;//0 为关闭静态生成,1为开启

}

}

保存即可.

说明: 手机模板为wap,

可实现 手机登录,自动切换使用手机模板.

电脑登录为后台设置的模板.

手机登录为动态URL.不能生成静态.