评论 - lizhenqiu blog

#⁸⁹⁴

作者：广西南宁市

letter-spacing: normal;
text-align: justify;
word-break: break-all;
/* word-wrap: break-word; */
/* white-space: pre-wrap; */

Run code

Cut to clipboard

#,广西南宁市,2017-10-11,15:55:22,

text-justify: inter-ideograph;/*IE*/

Run code

Cut to clipboard

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 15:52:55

展开↯

#⁸⁹⁵

作者：广西南宁市

专业的字符画制作人员会用全角空格来做，这样就不担心浏览器的空格合并问题了

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 15:48:05

展开↯

#⁸⁹⁶

作者：广西南宁市

文章：成功的故事只能倒叙着讲发表时间：2017-10-11, 07:53:17

展开↯

#⁸⁹⁷

作者：广西南宁市

PHP 合并图像 imagecopymerge 函数（水印制作实例）
转载地址：http://www.5idev.com/p-php_imagecopymerge.shtml

<?
header("Content-type: image/jpeg");

//原始图像
$dst = "images/flower_1.jpg";

//得到原始图片信息
$dst_im = imagecreatefromjpeg($dst);
$dst_info = getimagesize($dst);

//水印图像
$src = "images/logo.gif";
$src_im = imagecreatefromgif($src);
$src_info = getimagesize($src);	

//水印透明度
$alpha = 30;

//合并水印图片
imagecopymerge($dst_im,$src_im,$dst_info[0]-$src_info[0],$dst_info[1]-$src_info[1],0,0,$src_info[0],
$src_info[1],$alpha);

//输出合并后水印图片
imagejpeg($dst_im);
imagedestroy($dst_im);
imagedestroy($src_im);
?>

Run code

Cut to clipboard

#,广西南宁市,2017-10-10,12:00:37,
php 修改图片大小

<?php
// 重置图片文件大小
function resize_image($filename, $tmpname, $xmax, $ymax)
{
    $ext = explode(".", $filename);
    $ext = $ext[count($ext)-1];
 
    if($ext == "jpg" || $ext == "jpeg")
        $im = imagecreatefromjpeg($tmpname);
    elseif($ext == "png")
        $im = imagecreatefrompng($tmpname);
    elseif($ext == "gif")
        $im = imagecreatefromgif($tmpname);
 
    $x = imagesx($im);
    $y = imagesy($im);
 
    if($x <= $xmax && $y <= $ymax)
        return $im;
 
    if($x >= $y) {
        $newx = $xmax;
        $newy = $newx * $y / $x;
    }
    else {
        $newy = $ymax;
        $newx = $x / $y * $newy;
    }
 
    $im2 = imagecreatetruecolor($newx, $newy);
    imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y);
    return $im2; 
}
?>

Run code

Cut to clipboard

#,广西南宁市,2017-10-10,12:01:22,
PHP实例————图片等比例缩放功能

<?php
function ImageShrink($imgfile,$minx,$miny){

	//获取大图信息
	$imgarr=getimagesize($imgfile);
	$maxx=$imgarr[0];//宽
	$maxy=$imgarr[1];//长
	$maxt=$imgarr[2];//格式
	$maxm=$imgarr['mime'];//mime类型

	//大图资源
	$maxim=imagecreatefromjpeg($imgfile);

	//缩放判断
	if(($minx/$maxx)>($miny/$maxy)){
		$scale=$miny/$maxy;
	}else{
		$scale=$minx/$maxx;	
	}

	//对所求值进行取整
	$minx=floor($maxx*$scale);
	$miny=floor($maxy*$scale);
	
	//添加小图
	$minim=imagecreatetruecolor($minx,$miny);

	//缩放函数
	imagecopyresampled($minim,$maxim,0,0,0,0,$minx,$miny,$maxx,$maxy);

	//小图输出
	header("content-type:{$maxm}");

	//判断图片类型
	switch($maxt){
		case 1:
			$imgout="imagegif";
			break;
		case 2:
			$imgout="imagejpeg";
			break;
		case 3:
			$imgout="imagepng";
			break;
	}
	//变量函数
	$imgout($minim,'copypic.jpg');
	
	
	//释放资源
	imagedestroy($maxim);
	imagedestroy($minim);
}

ImageShrink("picture/apple.jpg",50,50);
?>

Run code

Cut to clipboard

文章：自动生成微信公众号推送文封面图片完整显示图片比例尺寸发表时间：2017-10-10, 12:00:00

展开↯

#⁸⁹⁸

作者：广西南宁市

芳芳造型
群发推送图文封面，生成素材上传保存永久

<?php

namespace Addons\Qunsend\Controller;
use Home\Controller\AddonsController;

class QunsendController extends AddonsController{
	function sf(){
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
	}
	function nconfig(){
		return getAddonConfig ( 'WeiSite' );
	}
	//预览
	function qunfasyl(){
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$nconfig=$this->nconfig();
		//echo $nconfig['bbyueyuesjttsyywxh'];exit;
		$access_token=get_access_token ();
		$s=M('qunsend')->where('id='.$id)->find();
		$media_id=$s['media_id'];
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		$paramStr .= '{"towxname":"'.$nconfig['bbyueyuesjttsyywxh'].'","mpnews":{"media_id":"'.$media_id.'"},"msgtype":"mpnews" }';
		$res = post_data ( $url, $paramStr );
		//dump($res['0']);
		
		if($res['0']!=0){
			echo $res['errmsg'];
			exit;
		}
		$sav['qf']='已预览';
		M('qunsend')->where('id='.$id)->save($sav);
		
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
		//if($res['0']==0) echo '预览已经发送';
		exit;
	}
	//推送
	function qunfas(){
		//exit;
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$access_token=get_access_token ();
		$s=M('qunsend')->where('id='.$id)->find();
		$media_id=$s['media_id'];
		
		
		
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/sendall?access_token=' . $access_token;
		$paramStr .= '{"filter":{"is_to_all":true},"mpnews":{"media_id":"'.$media_id.'"},"msgtype":"mpnews","send_ignore_reprint":0}';
		$res = post_data ( $url, $paramStr );
		
		if($res['0']!=0){
			echo $res['errmsg'];
			exit;
		}
		$sav['qf']='已经群发';
		M('qunsend')->where('id='.$id)->save($sav);
		
		
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
		//dump($res);
		exit;
	}
	function ass(){
		//获取推送文章 qunsend
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$access_token=get_access_token ();
		
		$contenttop='<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/qbke2mSU58VnW25BcMnoDRqJUNULibduT7b7bBLnWcvxgWCgzpg17QRKcz8icj7vrCoHG9a6gfiabuZuOl5oeluBw/0"></p>';
		$contentbottom='<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/qbke2mSU58VnW25BcMnoDRqJUNULibduT6EiaeRoqKTA8ObByU69qNMnBibqYkjeWtThD1dUm8vAwoGuHlm6JsiaOA/0"></p>';
		
		/*$p='\618-150429120J5.gif';
		$res=$this->wximgup($p,$access_token,1);
		dump($res);
		exit;*/
		
		$s=M('custom_reply_news')->where('id='.$id)->find();
		
		
		//dump($s);exit;
		$content=$s['content'];
		preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $content, $match); 
		/*dump($match);
		exit;*/
		//重新上传文中的图片链接
		//$nimgurl=explode('<img src="',$s['content']);
		foreach($match['1'] as $k=>&$v){
			$res=$this->wximgup($v,$access_token,1);
			$content=str_ireplace($v,$res['url'],$content);
		}
		/*dump($content);
		exit;*/
		
		//$content=$s['content'];
		//$content=21321321;//str_ireplace('/Uploads/Editor/gh_c7d5c953c490/','http://ffzx.lizhenqiu.com/Uploads/Editor/gh_c7d5c953c490/',$content);
		
		//检查是否存在预推送文章
		/*$cs=M('qunsend')->where('sid='.$id)->find();
		if(empty($cs)){
			
		}else{
			exit;
		}
		//防止文章修改推送 改为使用最新 所以每次添加
		*/
		if(!$s['cover']) $path='/111111.jpg';
		else{
			$path = get_cover ( $s['cover'] );
			$path = $path['path'];
		}
		
		$nconfig=$this->nconfig();
		//900*500比例尺寸 2017.10.10
		if($nconfig['wxfmzdddd']){
			$this->getnewjjfm($path);
			$path='/12345678980.jpg';
		}
		//end
		
		//修复空封面bug
		$res=$this->wximgup($path,$access_token);
		//dump($res);
		//exit;
		$coverurl=$res['media_id'];
		//$content=$nimgurl;//$s['content'];
		//echo $content;exit;
		
			$articlesurl='https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token='.$access_token;
			$jsonArr = array(
				"articles"=> array(
					array(
						// 我就是少了这层array 才会报empty news data 错误
						"title"=> $s['title'],
						"thumb_media_id"=> $coverurl,
						"author"=> 'XX170220',
						"digest"=> $s['intro'],
						"show_cover_pic"=> 0,
						"content"=> $contenttop.$content.$contentbottom,
						"content_source_url"=> 'http://ffzx.lizhenqiu.com/index.php?s=/addon/WeiSite/WeiSite/lastprice/sp/sp/id/'.$id.'.html',
					)
				)
			);
			$json3=json_encode($jsonArr,JSON_UNESCAPED_UNICODE);
			$res=post_data ( $articlesurl, $json3, true );
			$media_id=$res['media_id'];
			
		/*$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		$paramStr .= '{"towxname":"iswtf_","mpnews":{"media_id":"'.$res['media_id'].'"},"msgtype":"mpnews" }';
		$res = post_data ( $url, $paramStr );*/
		//dump($res);exit;
		
		
		$acs['sid']=$id;
		$acs['title']=$s['title'];
		$acs['ctime']=time();
		$acs['media_id']=$media_id;
		$acs['content']=$content;
		$acs['coverurl']=$coverurl;
		$cs=M('qunsend')->add($acs);
		echo $cs;
		//dump($s);
		exit;
		//echo 'fasd';
		
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		//$paramStr .= '{"filter":{"is_to_all":true},';
		//$paramStr .= '"text":{"content":"' . '3432423423' . '"},"msgtype":"text"}';
		
		$res=$this->get_image_media_id(740,$access_token);
		$paramStr .= '{"towxname":"iswtf_","mpnews":{"media_id":"'.$res['media_id'].'"},"msgtype":"mpnews" }';
		
		
		$res = post_data ( $url, $paramStr );
		dump($res);
		//$neww=$this->get_image_media_id(625);
		//dump($neww);
		//$this->display();
	}
	//上传图片到微信
	function wximgup($path,$access_token,$u){
		$url='https://api.weixin.qq.com/cgi-bin/media/uploadimg';
		if(!$u) $url='https://api.weixin.qq.com/cgi-bin/media/upload';
		$param ['media'] = '@' . realpath(SITE_PATH . $path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token;
		$param ['type'] = 'image';
		//$param ['media'] = curl_file_create($path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token);
		$param ['access_token'] = $access_token;
		return $res = post_data ( $url, $param, true );
	}
	
	// 新增临时图片素材
	function get_image_media_id($cover_id,$access_token) {
		$cover = get_cover ( $cover_id );
		$path = $cover ['path'];
		
		/*echo get_access_token ();exit;
		$key = 'access_token_' . get_token ();
		echo S ( $key );exit;*/
		/*$key = 'access_token_' . get_token ();
		S ( $key, 0, 7200 );*/
		//echo realpath(SITE_PATH . $path);exit;
		
		//$access_token=get_access_token ();
		//$url='https://api.weixin.qq.com/cgi-bin/media/uploadimg';
		$url='https://api.weixin.qq.com/cgi-bin/media/upload';
		$param ['media'] = '@' . realpath(SITE_PATH . $path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token;
		$param ['type'] = 'image';
		//$param ['media'] = curl_file_create($path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token);
		
		
		$param ['access_token'] = $access_token;
		
		return $res = post_data ( $url, $param, true );
		
		//start
		$articlesurl='https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token='.$access_token;
		//$articlesparam ['access_token'] = $access_token;
		/*$articlesparam ['articles'][0]['thumb_media_id'] = $res['media_id'];
		$articlesparam ['articles'][0]['author'] = '3432423';
		$articlesparam ['articles'][0]['title'] = 'Happy Day';
		$articlesparam ['articles'][0]['content_source_url'] = 'www.qq.com';
		$articlesparam ['articles'][0]['content'] = 'content';
		$articlesparam ['articles'][0]['digest'] = 'digest';
		$articlesparam ['articles'][0]['show_cover_pic'] = 1;*/
$jsonArr = array(
	"articles"=> array(
		array(
			// 我就是少了这层array 才会报empty news data 错误
			"title"=> 'dingdingdemo',
			"thumb_media_id"=> $res['media_id'],
			"author"=> 'martin',
			"digest"=> 'digest',
			"show_cover_pic"=> 0,
			"content"=> $content,
			"content_source_url"=> 'https://www.baidu.com/',
		)
	)
);
$json3=json_encode($jsonArr,JSON_UNESCAPED_UNICODE);
		
		return post_data ( $articlesurl, $json3, true );
		//end
		
		return $res['media_id'];
		
		echo $path;exit;
		$driver = C ( 'PICTURE_UPLOAD_DRIVER' );
		if ($driver != 'Local' && ! file_exists ( SITE_PATH . $cover ['path'] )) { // 先把图片下载到本地
			
			$pathinfo = pathinfo ( SITE_PATH . $cover ['path'] );
			mkdirs ( $pathinfo ['dirname'] );
			
			$content = wp_file_get_contents ( $cover ['url'] );
			$res = file_put_contents ( SITE_PATH . $cover ['path'], $content );
			if (! $res) {
				return 0;
			}
		}
		$path = $cover ['path'];
		if (! $path) {
			return 0;
		}
		$param ['type'] = 'image';
		$param ['media'] = '@' . realpath ( SITE_PATH . $path );
		$url = 'https://api.weixin.qq.com/cgi-bin/media/upload?access_token=' . get_access_token ();
		$res = post_data ( $url, $param, true );
		if (isset ( $res ['errcode'] ) && $res ['errcode'] != 0) {
			return $res;
		}
		return $res ['media_id'];
	}
	
	function getnewjjfm($src){
		//原始图像
		$dst = "./a.png";
			//实测900*500比例尺寸图片已不会出现裁剪图片边缘的问题，只需要发送多图文消息时注意标题文字是否会挡住图片内容即可。
			$minx=900;
			$miny=500;

		//得到原始图片信息
		$dst_im = imagecreatefrompng($dst);
		$dst_info = getimagesize($dst);

		//水印图像
		$src = ".".$src;
		$src_im = imagecreatefromjpeg($src);
		$src_info = getimagesize($src);	

		$nx=$src_info[0];
		$ny=$src_info[1];

		if($nx>$minx || $ny>$miny){
			//获取大图信息
			$maxx=$src_info[0];//宽
			$maxy=$src_info[1];//长
			$maxt=$src_info[2];//格式
			$maxm=$src_info['mime'];//mime类型


			//缩放判断
			if(($minx/$maxx)>($miny/$maxy)){
				$scale=$miny/$maxy;
			}else{
				$scale=$minx/$maxx;	
			}

			//对所求值进行取整
			$minx=floor($maxx*$scale);
			$miny=floor($maxy*$scale);
			
			//添加小图
			$minim=imagecreatetruecolor($minx,$miny);

			//缩放函数
			imagecopyresampled($minim,$src_im,0,0,0,0,$minx,$miny,$maxx,$maxy);
			//imagejpeg($minim);
			$src_im=$minim;
			$nx=$minx;
			$ny=$miny;
		}


		//水印透明度
		$alpha = 100;

			$nwx=($dst_info[0]-$nx)/2;
			$nwy=($dst_info[1]-$ny)/2;
			

						//imagealphablending($dst_im , false);//关闭混合模式，以便透明颜色能覆盖原画板
						//imagefill($image , 0 , 0 , $bg);//填充
						imagesavealpha($dst_im , true);//设置保存PNG时保留透明通道信息
			
			
		//合并水印图片
		imagecopymerge($dst_im,$src_im,$nwx,$nwy,0,0,$nx,$ny,$alpha);

		//输出合并后水印图片
		imagepng($dst_im,'./12345678980.jpg');
		imagedestroy($dst_im);
		imagedestroy($src_im);
	}
	
}

Run code

Cut to clipboard

文章：自动生成微信公众号推送文封面图片完整显示图片比例尺寸发表时间：2017-10-10, 11:56:41

展开↯

#⁸⁹⁹

作者：广西南宁市

注意路径问题

$dst = "./a.png";
$dst = "/a.png";

Run code

Cut to clipboard

文章：自动生成微信公众号推送文封面图片完整显示图片比例尺寸发表时间：2017-10-10, 11:40:35

展开↯

#⁹⁰⁰

作者：广西南宁市

测试了下，引用很降低性能：
引用

$a = array('a','c','d','e','f','g','c','d','e','f','g','c','d','e','f','g','c','d','e','f','g');
    $b = $a;
    function printArray(&$arr) //引用传递，值传递时去掉&
    {
        print(count($arr));
 
    }
    $stime=microtime(true); //获取程序开始执行的时间
     
    for($i=0;$i<=100000;$i++) {
          printArray($a);
          
    }
     echo '<br />';
    $etime=microtime(true);//获取程序执行结束的时间 
    $total=$etime-$stime;   //计算差值 
    echo $total.'秒';

Run code

Cut to clipboard

0.074603080749512秒不引用
0.19360995292664秒

文章：PHP引用(&)使用详解发表时间：2017-10-09, 17:26:19

展开↯

#⁹⁰¹

作者：广西南宁市

不能输入test（1）是因为应该传过去地址，而数字没有地址？？

#,广西南宁市,2017-10-09,17:25:26, 1应该算是一个表达式，传递表达出会有错误提示。

文章：PHP引用(&)使用详解发表时间：2017-10-09, 17:24:28

展开↯

#⁹⁰²

作者：北京市

不听成功者胡说八道，只听失败者的原因

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-10-01, 16:36:30

展开↯

#⁹⁰³

作者：广西南宁市

参考资料：
浏览器兼容
css3美化radio单选框(兼容IE9+)
模拟光标打字
CSS radio/checkbox单复选框元素显隐技术
改变CSS世界纵横规则的writing-mode属性
你不知道的CSS（三）

文章：CSS黑魔法小技巧发表时间：2017-09-30, 17:05:58

展开↯

#⁹⁰⁴

作者：广西南宁市

补充一个用得比较少的伪元素，可以改变选择文本时高亮的样式

.container::selection {
    background: red;
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,16:45:25, css实现两端对齐

text-align-last: justify;

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:04:32, rem的那个应该用calc包裹一下吧，不然会报错。数据不能直接计算，要用CSS函数 calc()来帮助实现。

#,广西南宁市,2017-09-30,17:05:01, 受益很多。。。基础一般，有些看不懂。。。
另外，这个 .nav li:first-child ~ li(不包括最后一个li) 也是不包括第一个li 而且第一个的话 :first-child 好像是可以不用写的吧就是 .nav li ~ li , 作者写是考虑可读性吧

#,广西南宁市,2017-09-30,17:05:17, text-align-last兼容性不好

文章：CSS黑魔法小技巧发表时间：2017-09-30, 16:41:25

展开↯

#⁹⁰⁵

作者：广西南宁市

css3美化radio单选框(兼容IE9+)

<style>.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}
</style>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:00:08,

<style class="cp-pen-styles">.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}
</style></head><body>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:02:03,
css3美化checkbox复选框(兼容IE9+)

<style class="cp-pen-styles">@charset "UTF-8";
.checkbox-beauty-container {
  font-size: 0;
}
.checkbox-beauty-container input[type="checkbox"]:checked + .checkbox-beauty::after {
  content: '✓';
  font-size: 16px;
  font-weight: bold;
  color: green !important;
}
.checkbox-beauty-container .checkbox-name {
  vertical-align: middle;
  font-size: 16px;
}
.checkbox-beauty-container .checkbox-beauty {
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid green;
  display: inline-block;
  margin: 0 15px 0 3px;
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .checkbox-beauty:hover {
    box-shadow: 0 0 7px green;
  }
  .checkbox-beauty:hover::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: green;
  }
}
</style>
<div class="checkbox-beauty-container">
   
        <span class="checkbox-name">苹果</span>
        <input type="checkbox" name="checkboxName" id="checkboxName1" hidden/>
        <label for="checkboxName1" class="checkbox-beauty"></label>
  
   
        <span class="checkbox-name">香蕉</span>
        <input type="checkbox" name="checkboxName" id="checkboxName2" hidden />
        <label for="checkboxName2" class="checkbox-beauty"></label>
   
  
        <span class="checkbox-name">橘子</span>
        <input type="checkbox" name="checkboxName" id="checkboxName3" hidden />
        <label for="checkboxName3" class="checkbox-beauty"></label>
   
</div>

Run code

Cut to clipboard

文章：CSS 美化复选框CHECKBOX-无图片方式发表时间：2017-09-30, 16:56:36

展开↯

#⁹⁰⁶

作者：广西南宁市

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>h1{
    font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
	width: 20ch; /* # of chars */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
  
  animation: typing 10s steps(20,end) 2 ,
    blink .5s step-end infinite alternate;
  
}


@keyframes typing { from { width: 0; } }
@keyframes blink { 50% { border-color: transparent; } }


</style>
</head>
<body>
  <h1>This is hello world !</h1>
</body>
</html>

Run code

Cut to clipboard

文章：js+jQuery实现网页打字机效果（带光标）js模拟光标打字发表时间：2017-09-30, 16:55:01

展开↯

#⁹⁰⁷

作者：广西南宁市

现在不加入适配 iPhone X 的代码都不潮流了啊

文章：CSS黑魔法小技巧发表时间：2017-09-30, 16:39:51

展开↯

#⁹⁰⁸

作者：广西南宁市

定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
提示和注释
注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 14:46:44

展开↯

#⁹⁰⁹

作者：广西南宁市

关于JSON.parse的深度拷贝中，Date类型也会被更改，由Date对象变为String

#,广西南宁市,2017-09-30,12:25:50,
第3条里的 "$$" 函数谁能讲解下?

IE11 里是
function(n,t){return t?t.querySelectorAll.call(t,n):window.document.querySelectorAll.apply(window.document,arguments)}

Edge里面是未定义(Microsoft Edge 41.16296.0.0)

Chrome 里

ƒ $$(selector, [startNode]) { [Command Line API] }
FF 的文档写它是 Web 开发控制台的 helper command

#,广西南宁市,2017-09-30,12:44:10,

<p style="line-height: 18px; font-size: 18px;  font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<script>
for (var line=1; line<60; line++) {
  for(var i=1;i<29;i++) {
    var s = (Math.floor((Math.random()*2)%2)) ? "╱" : "╲";
    document.write(s);
  }
  document.writeln("<br>");
}
</script>
</p>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,14:41:03, js开发实现简单贪吃蛇游戏（20行代码）

<!doctype html>
<html>
<body>
	<canvas id="can" width="400" height="400" style="background: Black"></canvas>
	<script>
		var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
		function draw(t, c) {
			ctx.fillStyle = c;
			ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
		}
		document.onkeydown = function(e) {
			fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
		};
		!function() {
			sn.unshift(n = sn[0] + fx);
			if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
				return alert("GAME OVER");
			draw(n, "Lime");
			if (n == dz) {
				while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
				draw(dz, "Yellow");
			} else
				draw(sn.pop(), "Black");
				setTimeout(arguments.callee, 130);
		}();
	</script>
</body>
</html>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,14:42:09, 有一bug, dz = 370的时候，黄的吃了以后画不出来了

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:15:04

展开↯

#⁹¹⁰

作者：广西南宁市

let a = 1, b = 2;
[a, b] = [b, a];

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:16:39,

(10)["toString"]() === "10" 写成 10..toString() === "10" 更显装逼~

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:17:31, 有问题

console.log( '1.0123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','))
result: 1.0,123

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:18:14,

Math.random().toString(36).substring(2)

Run code

Cut to clipboard

这类产生随机字符串的方法不严谨因为

Math.random()

Run code

Cut to clipboard

位数是不固定的玩玩可以实际使用估计不行

#,广西南宁市,2017-09-30,12:18:59,@3, 论如何优雅的取随机字符串
在我chrome控制台（版本 55.0.2883.87 m）
Math.random().toString(36).substring(2)//经测试23-26位都有可能
"7jz8ov7swm7ong7w77x9jdobt9"
为何和上面的有差异性呢？是我Chrome版本太低还是太高导致JS的版本不一致导致的？

#,广西南宁市,2017-09-30,12:19:19,@4, 这个可能有误导，不好意思，我已经修改了，因为Math.random生成的随机数可能很长，也可能很短。

#,广西南宁市,2017-09-30,12:19:38, 从一个数组中找到一个数，O(n)的算法，找不到就返回 null。
正常算法不是这个么：

const find = (arr,x) => arr.filter(num=>num===x)[0]||null;

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:20:26,

[...'8'.repeat(6)]

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:22:44, 还有一个实用并且我经常用的：判断是否包含某元素，支持数组、字符串等

if(~"asdf".lastIndexOf("a")){
alert("exists");
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:23:09,@8, 为什么用lastIndexOf 不直接用indexOf

#,广西南宁市,2017-09-30,12:23:34,@9, 下标从0开始，0==false

#,广西南宁市,2017-09-30,12:24:04,@9, ~是移位操作，找不到下标返回-1，移位之后是0，恰好0==false；找到的话，至少返回0，移位后是1，也就是true

#,广西南宁市,2017-09-30,12:24:21,@9,
~ 是按位非， ~1 是 -2，这个地方是因为， if 里面的条件要经过两次处理，

ToBoolean(GetValue(exprRef))
其中 GetValue ，如果不是引用就直接返回原值，ToBoolean在处理Number时的规则是

The result is false if the argument is +0, −0, or NaN; otherwise the result is true.
所以你这个是在大部分时候是没有问题的

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:14:41

展开↯

#⁹¹¹

作者：广西南宁市

让js脚本永远不报错的方法：

window.onerror = function(m, f, l){ return true }

Run code

Cut to clipboard

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:13:50

展开↯

#⁹¹²

作者：广西南宁市

还有个布尔值的处理

eg:!!0 === false

Run code

Cut to clipboard

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:13:09

展开↯

Records:2788 48/147 «‹44 45 46 47 48 49 50 51 52 ›»