评论 - lizhenqiu blog

#¹²¹⁷

作者：广西南宁市

浮点数计算问题
js解释环境里面，0.1+0.2！=0.3 ；结果是true
为了避免产生精度差异，我们要把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂；

<script>
Math.formatFloat = function(f, digit) { 
    var m = Math.pow(10, digit); 
    return parseInt(f * m, 10) / m; 
} 

var numA = 0.1; 
var numB = 0.2;
console.log(0.1+0.2);
console.log(0.1+0.2==0.3);
console.log(0.1+0.2!=0.3);
console.log(Math.formatFloat(numA + numB, 1) === 0.3);</script>

Run code

Cut to clipboard

大部分编程语言都是这样处理精度差异的，借用过来处理一下 JS 中的浮点数精度误差。

文章：JS浮点数运算多出很多位小数点Bug的解决办法发表时间：2017-06-30, 14:47:14

展开↯

#¹²¹⁸

作者：广西南宁市

获取当前省市区

<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script><script>$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',
	function(){ 
	  alert(remote_ip_info.country);//国家  
	  alert(remote_ip_info.province);//省份  
	  alert(remote_ip_info.city);//城市  
});</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-30, 14:45:02

展开↯

#¹²¹⁹

作者：广西南宁市

边框颜色跟着字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
 
        .border {width: 1000px;margin: 100px auto;}
        .border li{width: 100px;height: 100px;display: inline-block;margin: 10px;line-height: 100px;text-align: center;position: relative;    -webkit-transform: scale(1); transform: scale(1);}
        .border li::before {
            position: absolute;
            z-index: -1;
            top: -1px;
            right: 0;
            bottom: 1px;
            left: 0;
            content: '';
            opacity: .5;
            border: 2px solid;
            border-radius: 3px;
        }
        .red{color:red;}
        .blue{color:blue;}
        .orange{color:orange;}

    </style>
</head>
<body>
    <div class="border">
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="orange">橘色</li>
    </div>


</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-30, 14:41:58

展开↯

#¹²²⁰

作者：广西南宁市

文章：2017年过半，我们身处的风口和泡沫发表时间：2017-06-30, 14:14:00

展开↯

#¹²²¹

作者：北京市

实现一个搜索提示（补全）功能需要JavaScript、ajax、数据库、jsp/php很多知识，
如果数据量大还需要特殊优化，一个小功能，花费太大精力不合适

但这是个可有可无的功能吗，肯定不是
对用户而言，可以有效降低输入成本，在面对输入框时，获得更多提示，不用那么迷茫和无助
对站长而言，可以优先推送网站的关键信息，等于多了一个广告位。

一所大学图书馆的搜索框智能提示，大约50万个词条（书名）
他们使用的是www.92find.com的搜索框智能提示免费产品,
只要一行javascript代码，就可以实现baidu、淘宝搜索框提示的全部功能
比如：拼音匹配、拼音首字母匹配、模糊搜索、智能容错，
还可以自定义提示词汇及其排序权重
你只需要准备好自己的提示词汇表就可以了，
无需编写程序，
五分钟（真的是5分钟）就可以在线配置拥有
主流搜索引擎都有的自动提示（自动补全）功能

文章：jquery城市搜索自动完成特效支持拼音首字母补全首字母自动完成发表时间：2017-06-29, 21:06:16

展开↯

#¹²²²

作者：广西南宁市

某大姐试戴一30万的翡翠镯子。。。摔碎了。是你，咋办？
我能开心死
1、大妈通过个人认证，开通微博。详细说明事情原委，诚恳自我反省。并积极表示承担赔偿。分分钟微博热搜。
2、次日，大妈发微博，声明已经购买该手镯，并出去店家证明和手镯图片。证明手镯真伪和品质。再次热搜。
3、第三日，大妈说明自身经济情况，表示家庭因此事困难拮据，恳请有利人士。对手镯进行二次加工，碎了的手镯打造为一对吊坠。
4、第四日，这时希望蹭热度做推广的工作室、团队、已经在大妈面前排好队了。选定一家工作室。双方发出声明。持续保持平时花钱都买不到的曝光率。
5、若干天后，通过网络推广，大V炒作。这一对让大妈晕倒、大众欢呼的碎镯子，经过某某工作室/公司/团队的二次修复，闪亮登场！同时与某平台合作，进行慈善拍卖。
6、与此同时，大妈华丽丽宣布，经过此次教训，受益良多，为了让更多人不走大妈弯路，大妈自己变成了翡翠经销商。大家多多捧场哦。
到了这一步，谁还管你这镯子本来值多少钱。

#,广西南宁市,2017-06-29,12:03:29, 那你还不去店里故意摔碎一个

文章：js 删除前confirm确认提示代码发表时间：2017-06-29, 12:03:06

展开↯

#¹²²³

作者：北京市

我的车二十万买来的，没有任何故障，车漆也光亮如新。平时都是放在车库里，需要出门的时候，都是我媳妇在后面推着走。过减速带的时候，我会找几个人抬过去。轮胎我会每天转半圈，防止轮胎同一个部位长期受压变形。过几天我还会用汽车举升机把车抬起来一下，防止悬架受力不均匀。空调从来不开，害怕里面的冷凝器发霉。机油我也每天搅动几次，害怕长时间静止损坏发动机油底壳的油封。门窗的缝隙我也用胶水封死了害怕别人塞的小广告卡住玻璃升降机。雨刷我都是拆下来放到被窝里，害怕雨刷长时间暴晒导致胶条老化门框密封胶条我也是每天涂抹一遍鲁花5S特级压榨花生油害怕胶条氧化变硬。电池我也是每天拆下来充电害怕蓄电池长时间自行放电导致不可逆的硫化转向的时候我也不舍得打转向灯都是让人在后面打手势，害怕烧坏灯泡。轮胎的气压每走两步我就测量一次害怕胎压过高或者过低引起轮胎寿命衰减每走几百米我还要下车去抠一下轮胎花纹中夹住的小石子，害怕扎坏轮胎

文章：在现在万众创业的年代，职场员工入职是有门槛，但注册开个公司做老板的门槛无非就是一个钱字发表时间：2017-06-29, 00:44:47

展开↯

#¹²²⁴

作者：广西南宁市

function vpost($url,$data){
	// 模拟提交数据函数
    $curl = curl_init(); // 启动一个CURL会话
    curl_setopt($curl, CURLOPT_URL, $url); // 要访问的地址
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0); // 对认证证书来源的检查
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1); // 从证书中检查SSL加密算法是否存在
    curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); // 模拟用户使用的浏览器
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); // 使用自动跳转
    curl_setopt($curl, CURLOPT_AUTOREFERER, 1); // 自动设置Referer
    curl_setopt($curl, CURLOPT_POST, 1); // 发送一个常规的Post请求
    curl_setopt($curl, CURLOPT_POSTFIELDS, $data); // Post提交的数据包
    curl_setopt($curl, CURLOPT_TIMEOUT, 30); // 设置超时限制防止死循环
    curl_setopt($curl, CURLOPT_HEADER, 0); // 显示返回的Header区域内容
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // 获取的信息以文件流的形式返回
    $tmpInfo = curl_exec($curl); // 执行操作
    if (curl_errno($curl)) {
       echo 'Errno'.curl_error($curl);//捕抓异常
    }
    curl_close($curl); // 关闭CURL会话
    return $tmpInfo; // 返回数据
}
			$url = 'https://captcha.luosimao.com/api/site_verify';
			$data =array('api_key'=>'5bf45c5**********','response'=>$_POST['luotest_response']);
			$result=vpost($url,$data);
			$result=json_decode($result,true);
			$result=$result['res'];
			//echo $_POST['luotest_response'];
			//echo $result;exit;
			if($result!='success'){
				exit('1');
				//redirect('人机验证失败！', '?module=login');
			}

Run code

Cut to clipboard

<script src="//captcha.luosimao.com/static/dist/api.js"></script>
<div class="l-captcha" data-site-key="94a8dfb08********"></div>

Run code

Cut to clipboard

Luosimao人机验证接口文档captcha,人机验证,图形验证，图形验证码,人机识别新型人机验证方案

#,广西南宁市,2017-06-28,10:00:28, js中网页前进和后退的代码

<a href="javascript:history.go(-1);">后退</a>
<a href="javascript:history.go(1);">前进</a>

Run code

Cut to clipboard

文章：YOURPHP验证码不显示问题解决方法清理图片缓存发表时间：2017-06-28, 09:59:37

展开↯

#¹²²⁵

作者：广西南宁市

微信公众平台分享接口
jssdk.php
也修改

    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

Run code

Cut to clipboard

否则也会报错：invalid signature错误

#,广西南宁市,2017-06-27,18:58:09,

require_once(__DIR__.'/db_connect.php');
<?php
require_once __DIR__ . '/file.php';

Run code

Cut to clipboard

#,广西南宁市,2017-06-27,18:59:06,
errmsg config ok 调试模式下正常了
注释掉关闭调试模式

   //console.log('fdasfdas');
  wx.config({
    /*debug: FALSE,*/

Run code

Cut to clipboard

#,广西南宁市,2017-06-27,19:01:16,

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("wx2e642********", "ac59c********643");
$signPackage = $jssdk->GetSignPackage();
?>

  

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
   //console.log('fdasfdas');
  wx.config({
    /*debug: FALSE,*/
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
	  'onMenuShareTimeline',
	  'onMenuShareAppMessage',
	  'onMenuShareQQ',
	  'onMenuShareWeibo',
	  'onMenuShareQZone'
    ]
  });
  wx.ready(function () {
    // 在这里调用 API
		wx.onMenuShareTimeline({
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareAppMessage({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareQQ({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareWeibo({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareQZone({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
  });
</script>

Run code

Cut to clipboard

#,广西南宁市,2017-06-27,19:02:09,

    <div id="wx_pic" style="margin:0 auto;display:none;">
                    <img src="https://img.******.com/article/cover/201703/11/175600370063.png">
            </div>
<meta content="https://img.*****.com/article/cover/201706/27/090518161674.jpg" property="og:image">

Run code

Cut to clipboard

文章：微信支付错误两个问题的解决：curl出错，错误码:60 发表时间：2017-06-27, 18:57:37

展开↯

#¹²²⁶

作者：广西南宁市

百度是第二个联想，第三个雅虎
百度一下，你就上当

#,广西南宁市,2017-06-15,09:12:35, 重工业烧烤，轻工业喊麦，东北产业转型来的猝不及防。

#,广西南宁市,2017-06-15,09:14:57,

#,广西南宁市,2017-06-15,09:21:10,

#,广西南宁市,2017-06-15,09:39:09, 又一次走过那条昏暗的小巷，那小屋里红色的霓虹灯在照耀，我抽着烟,忽然听到里面传来了一阵骚叫“小帅哥,来玩嘛~” 老子一下子扔开烟头，不屑地笑“这次老子还不骑疯你？我飞扑过去,投了一个硬币,熟悉的歌声响起“爸爸的爸爸叫爷爷!爸爸的妈妈叫奶奶!……” 这一通摇摆，刺激得我头昏目眩的

#,广西南宁市,2017-06-15,09:39:19,@4, 不懂得欣赏摇摇车的当代青年，怎么能体会驾驶的乐趣？

#,广西南宁市,2017-06-15,09:40:27,

#,广西南宁市,2017-06-15,09:45:53, 近一年时间很少听到百度的消息了，看到也只是空无缥缈的 AI 和无人驾驶。感觉一点实用性都没有至少在目前来说，相反阿里和腾讯不停的在创新。感觉百度已经快要从 BAT 中掉队了，PC 时代引以为豪的内容搜索。现在，内容方面已经被今日头条等新阅读模式给颠覆了。除了百度搜索，360 搜索使用的人也不少，更重要的是现在获取信息渠道变了，以前只有浏览器，现在微博微信都可以获取。

再说之前的三大门户网站，新浪手里的微博勉强支撑脸面；网易靠着游戏和电商，闷声大发财，不过感觉还是老的模式没有创新吃老本；搜狐已经日落西山，网站上的广告都很少了，估计翻身很难了；

#,广西南宁市,2017-06-15,09:49:26, 当年 google 退出中国，最大的受害者居然是百度！

#,广西南宁市,2017-06-15,17:09:00,@8, 百度不是大力发展“人工智障” 么？

#,广西南宁市,2017-06-15,17:25:18, 不管啥创业项目，多么好的市场前景，最后要想赢，还得是资本层面的拼杀

#,广西南宁市,2017-06-16,09:08:46, 很讨厌今日头条，今日头条这个东西无时不刻都在提醒着我们这个社会的主题群众是有着怎样的审美态度，同时今日头条还不断地去迎合这个态势，不能说无良，但是没有媒体人的操守

#,广西南宁市,2017-06-16,09:08:56,@11, 惊闻今日头条比我更了解我，一看再看，全是外星人、美女捉蛇、转世不挚签云云，严重怀疑自己还在幼稚园打转。

#,广西南宁市,2017-06-21,10:48:05, 带着世俗的枷锁行走太远太久，忘了初心，迷失了双眼。

#,广西南宁市,2017-06-21,10:56:49, 讲个笑话，A 程序员和 B 程序员，B 程序员提出离职，于是老板重新招聘，以高出 A 程序员原工资 30%的代价，通过猎头挖到 A 程序员，老板觉得挖到宝，窃喜！在 B 程序员和 A 程序员交接的时候，A 程序员觉得 B 程序员不错，于是推荐他到自己的原公司顶替自己的原岗位，B 程序员顺利通过面试入职，薪资提升 50%，A 和 B 通过互换的方式提高了彼此的薪资，两家老板都觉得很满意，原岗位原职责全部不变。
============================
再说个真实的事情，我在上家公司，假设工资是 x, 我跟我们领导谈加工资，老板以公司困难等为由不给我加，然后我一怒之下裸辞，然后找了个（ x+6k ）的工作。我辞职之后，公司马上发了一个招聘，用薪资范围为[x, x+4k]来招人替代我的岗位。。。我也不知道老板们都是怎么想的！

#,广西南宁市,2017-06-21,10:59:21, 我有一句话，但是不想讲。。

#,广西南宁市,2017-06-21,15:04:50,@15, 马云说，脸有屁用。

#,广西南宁市,2017-06-21,15:25:27, 创业公司里，每个人都应该是多面手，守本分的人就应该在‘大公司’里呆着。意识与能力是两回事，前者要有，后者可学。我们一天不进步，一天就在退步，离别人对我们的期待又远一点。

#,广西南宁市,2017-06-21,17:06:57, 他们可能都得想一下，然后给出一个符合场景的回答。

#,广西南宁市,2017-06-22,09:16:22, 不要因为走得太远，就忘了当初为什么出发。

#,广西南宁市,2017-06-22,09:21:31, 要有钱才有资格被骗

#,广西南宁市,2017-06-22,09:26:41, 马云，还记得1980年你在西湖边给我做过导游吗？

#,广西南宁市,2017-06-22,10:33:54,
转一网上流转多年的段子

第一天采访：唐僧取经回北京才下飞机，记者问：你对三陪小姐有何看法？唐僧很吃惊：北京也有三陪小姐？记者第二天登报《唐僧飞抵北京，开口便问有无三陪》。

第二天采访：记者问唐僧：你对三陪问题有何看法？唐僧：不感兴趣！记者第二天登报《唐僧夜间娱乐要求高，本地三陪小姐遭冷遇》。

第三天采访：记者问唐僧，你对三陪小姐有没有看法？唐僧很生气：什么三陪四陪五陪的？不知道！记者第二天登报《三陪已难满足唐僧，四陪五陪方能过瘾》。

第四天采访：记者后来再问唐僧，唐僧不发言。记者第二天登报《面对三陪问题，唐僧无言以对》。

第五天采访：唐僧大怒，对记者说，这么乱写，我去法院告你！记者第二天登报《唐僧一怒为三陪》。

第六天采访：唐僧气急之下，将记者告到法庭。媒体争相报道《法庭将审理唐僧三陪小姐案》，唐僧看后撞墙而死。

第七天采访：唐僧撞墙而死后，媒体补充报道《为了三陪而殉情：唐僧的这一生》。

================================================================

霍金有关外星人的言论有大致也是这么个套路：要么牵强附会，要么直接造谣。

#,广西南宁市,2017-06-22,16:59:30, 要想挣脱以前一成不变生活的束缚，野心就是最好的救命稻草。

#,广西南宁市,2017-06-23,10:40:27, 犹太长老一个古老的命题：“我不为己，谁人为我，但我只为己，那我又是谁？”。

#,广西南宁市,2017-06-23,15:18:50, 年轻时候最不应该犯的错，就是因为面子、感情、怯懦...种种，委屈自己的意志，到最后发现自己一辈子只是想了很多，其实一事无成。

#,广西南宁市,2017-06-23,16:06:59, 真正的穷不是没有钱，而是没有能力去改变现状。

#,广西南宁市,2017-06-23,18:11:12, 孩子，经历过浮华，才能守得住平凡

#,北京市,2017-06-25,00:25:14, 欠的越多，，关心你的人就越多。你应该感到幸福?

文章：js 删除前confirm确认提示代码发表时间：2017-06-15, 09:09:13

展开↯

#¹²²⁷

作者：广西南宁市

#,广西南宁市,2017-06-21,17:20:37,

#,广西南宁市,2017-06-23,15:22:45,

文章：js 删除前confirm确认提示代码发表时间：2017-06-21, 14:06:32

展开↯

#¹²²⁸

作者：广西南宁市

windows svn 上传后自动部署到web目录下，svnweb

第一步

把web目录设置为工作目录

"D:\Program Files (x86)\VisualSVN Server\bin\svn.exe" upgrade "D:\yiyun_www\test" --quiet --username chiyj --password chiyj

在DOS下执行。

第二步修改文件

D:\yiyun_code\test\hooks下新建文件

post-commit.bat 内容如下

@echo off
SET REPOS=%1
SET USER=%2
SET SVN="D:\Program Files (x86)\VisualSVN Server\bin\svn.exe"
SET DIR="D:\yiyun_www\test"
(call %SVN% update %DIR% --username chiyj --password chiyj --non-interactive)

参考 http://www.cnblogs.com/xiezhengcai/archive/2013/11/27/3445457.html

svn 自动部署到web服务器设置问题
修改服务器上的钩子程序post-commit，将指定要发布的内容的文件夹导出(export)到tomcat目录下就行了

钩子程序post-commit是在执行commit操作后自动执行的，这样每次commit后都自动执行一次导出操作，保持tomcat文件夹内容就是所要发布的内容

---------------------------------------------------------------------------
补充：
例如你版本库的svn访问地址是10.30.11.12:8080/svn/project1，你想把这个版本库下的/trunk/web文件夹发布到tomcat上，发布到tomcat的文件夹地址是d:/tomcat/opt/web，svn的管理员用户名是abc，密码是12345，那么这个钩子程序应该就是：
svn export 10.30.11.12:8080/svn/project1/trunk/web d:/tomcat/opt/web --force --username abc --password 12345 --no-auth-cache

（本人对linux不熟悉，这行指令如有与linux语法不一致的地方，请参考原理自行修改）
说明：
1、--force 是说强制覆盖d:/tomcat/opt/web这个文件夹，避免这个文件夹不为空时报错
2、--username abc --password 12345 是自动将用户名和密码作为参数传送进去
3、--no-auth-cache 是说不缓存用户名和密码，这是出于安全考虑
4、svn export 是将所指定的url的内容导出到所指定的文件夹去。这里之所以不用update而用export，是因为update会导致生成一个隐藏.svn文件夹，这个文件夹是我们不需要的

当然了，如果整个发布的内容很多的话，建议还是用update，而不用export，因为update只更新有变化的部分，而export将重新导出所有内容，网络消耗比update大。

windows下,配置的svn然后上传了,怎把项目指定上传目录下
同步？楼主的问题描述不是很清楚啊，如果是上传整个项目到svn的版本库中，

文章：VisualSVN Server自动发布配置部署svn代码到web目录服务器上线发表时间：2017-06-23, 11:52:43

展开↯

#¹²²⁹

作者：广西南宁市

瓦力 - 部署系统 wall.e

文章：VisualSVN Server自动发布配置部署svn代码到web目录服务器上线发表时间：2017-06-23, 11:51:33

展开↯

#¹²³⁰

作者：广西南宁市

两边线条中间文字css垂直居中水平线中部文字效果布局两边等距离宽线

<strong class="line-thru">或</strong>
<style>.line-thru {
	display: block;
	font-size: .875em;
	margin-bottom: 1em;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.line-thru:before {
	width: 40px;
	height: 10px;
	background-color: #fff;
	content: '';
	margin: -5px 0 0 -20px;
	left: 50%;
	position: absolute;
	top: 50%;
	z-index: -1;
}

.line-thru:after {
	border-bottom: 1px solid #dfe0e6;
	content: '';
	display: block;
	position: absolute;
	top: 49%;
	width: 100%;
	z-index: -2;
}</style>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-23, 09:55:51

展开↯

#¹²³¹

作者：广西南宁市

旋转loading加载中gif动画css3

<div style="box-sizing: border-box;width: 26px;height: 26px;position: absolute;top: 13px;left: 15px;border-width: 3px;border-style: solid;border-color: rgba(51, 54, 58, 0.4) transparent;border-radius: 13px;transform-origin: 50% 50% 0px;transition: transform 700s linear;/* transform: rotate(360000deg); */"></div>

Run code

Cut to clipboard

#,广西南宁市,2017-06-23,09:33:31,

<div id="mask">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div><style>#mask {
  position: relative;
  height: 30px;
  width: 50px;
  margin: 0 auto;
}
#mask span {
  display: block;
  bottom: 0px;
  left: 0;
  width: 1px;
  height: 30px;
  background-color: #fff;
  position: absolute;
  -webkit-animation: preloader 1.5s infinite ease-in-out;
  animation: preloader 1.5s infinite ease-in-out;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
#mask span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}
#mask span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
#mask span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
}
#mask span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background-color: #fff;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    background-color: #138DFF;
  }
  50% {
    height: 30px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background-color: #61B3FF;
  }
  100% {
    height: 30px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background-color: #61B3FF;
  }
}
@keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background-color: #61B3FF;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    background-color: #003C74;
  }
  50% {
    height: 30px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background-color: #61B3FF;
  }
  100% {
    height: 30px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background-color: #61B3FF;
  }
}</style>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-01, 15:45:17

展开↯

#¹²³²

作者：广西南宁市

文章：js 删除前confirm确认提示代码发表时间：2017-06-22, 10:04:19

展开↯

#¹²³³

作者：广西南宁市

最近做一个移动端的微信在线购物项目，记录下爬坑的点。
1、A页面跳到B页面，两个页面都有购物车，B页面清空/修改购物车产品后，返回A页面后，A页面的购物车仍是之前的内容，读取的缓存
解决：在A页面加入以下代码片段

if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },
   false);
}

Run code

Cut to clipboard

2、h5的html属性存储，如data-id=5存储的值为number，但.dataset.id返回的是字符串

3、给元素绑定事件，删除节点后（事件也同步解绑），再重新增加新的节点，也没有事件了。
解决：
jquery给待重新渲染（删除后重新新增）的节点父级元素绑定事件，parent.on('click',child,function(){....})

4、NaN === NaN false

5、异步回调地狱，jquery用defferred对象的方法解决

6、.find('')[i].dataset.id 就能获取，错误示范为==> .find('')[i]..get(0).dataset.id

7、其他需巩固的知识点
页面reflow、render，IOS无法冒泡，history的pushState()、replaceState()方法，html模板引擎的进一步熟练使用

文章：微信小程序之购物车功能发表时间：2017-06-21, 17:00:55

展开↯

#¹²³⁴

作者：广西南宁市

椭圆形

椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作。
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
<div id="oval"></div>                              
<style>
#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:09:13, 三角形

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

<div id="triangle"></div>                              
<style>#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:10:14, 倒三角形

与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：

<div id="triangle"></div>
<style>#triangle {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:11:16, 左三角形
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

<div id="triangle_left"></div>
<style>#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
} </style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:11:33,@3,

#,广西南宁市,2017-06-21,16:12:21,
右三角形

右三角形操作的是border-bottom、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

<div id="triangle_right"></div>
<style>#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:13:52,
菱形

制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。

<div id="diamond"></div>
<style>#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
} </style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:15:07,
梯形
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。

<div id="trapezium"></div>
<style>#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:15:24,@7,

#,广西南宁市,2017-06-21,16:16:20, 平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

<div id="parallelogram"></div>
<style>#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:17:30,
星形
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。

<div id="star"></div>
<style>#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
  
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
  
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}</style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:18:07,@10,

#,广西南宁市,2017-06-21,16:19:10,
六角星形

CSS六角星形
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。

<div id="star_six_points"></div>
<style>#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}
  
#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
} </style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:20:02,
五边形

CSS五边形
创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形。

<div id="pentagon"></div>
<style>#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}
  
#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
} </style>

Run code

Cut to clipboard

#,广西南宁市,2017-06-21,16:26:17,
六边形

六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。

<div id="hexagon"></div>
<style>#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}
  
#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}
  
#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}</style>

Run code

Cut to clipboard

CSS八角形

八角形的制作方法也有多种方式，这里使用的是先制作两个相同的梯形，然后在两边分别放置一个三角形。

<div id="octagon"></div>
<style>#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}
  
#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}
  
#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}  </style>

Run code

Cut to clipboard

CSS心形

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。

<div id="heart"></div>
<style>#heart {
    position: relative;
}
  
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
  
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}  </style>

Run code

Cut to clipboard

蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。

<div id="egg"></div>
<style>#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}  </style>

Run code

Cut to clipboard

CSS无穷符号

无穷符号可以通过border属性和设置伪元素的角度来实现。

<div id="infinity"></div>
<style>#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}
  
#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
  
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}</style>

Run code

Cut to clipboard

消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。

<div id="comment_bubble"></div>
<style>#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
  
#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}   </style>

Run code

Cut to clipboard

吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。

<div id="pacman"></div>
<style>#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}</style>

Run code

Cut to clipboard

文章：巧用边框设置一些效果发表时间：2017-06-21, 16:08:16

展开↯

#¹²³⁵

作者：广西南宁市

使用CSS3制作各种形状的图形
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。
圆形

要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

<div id="circle"></div>                              
<style>
#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}</style>

Run code

Cut to clipboard

文章：巧用边框设置一些效果发表时间：2017-06-21, 16:07:01

展开↯

Records:2788 65/147 «‹61 62 63 64 65 66 67 68 69 ›»