WRZ博客

快乐阅读!

《男孩》

2019-8-28 WRZ 生活

创作背景:

 《男孩》在湖南卫视《歌手2017》首演之前从未正式发布,梁博将以此歌向观众介绍一个全新的自己,讲述面对爱情的男人心声

歌曲鉴赏:

该曲从开始到结尾一气呵成,没有丝毫的拖泥带水,但是其中蕴含的情感又是那么的倔强和催泪

以上简介来自百度百科

标签: 生活 视频

评论(3) 浏览(569)

2019香港闹事时间轴

2019-8-19 WRZ 生活

      香港2月13日正式启动修例程序,遭到香港的商界和法律界的反对。商界认为这有可能影响香港的营商环境,法律界认为修例会破坏香港的司法独立。自6月以来,发生在香港的暴力活动不断升级。

  6月9日爆发大游行,反对修例。

  6月21日,示威者包围警察总部并堵塞出入口,以铁马、水马设置路障,封锁附近主要交通干道,向警察总部投掷鸡蛋,用激光照射警员。

  6月26日,示威者包围警察总部,并拆掉了“香港警察总部”牌匾。

  7月14日,香港示威者在沙田围攻警察,11名警察受伤,1名警察的手指被活生生咬断 ;

  7月20日,警察在突击检查荃湾区一座工厂大厦的时候,发现了一公斤的TATP烈性炸药和“燃烧弹”电油等物品,以及“香港民间人权阵线”的衣服。

  7月21日,蒙面人围堵中央人民政府驻香港特别行政区联络办公室,向大楼门口悬挂的国徽投掷黑色油漆弹 ;同日,身穿黑衣的示威者在元朗恶意挑衅,引发暴力冲突 ;

  7月23日,挖掘立法会议员何君尧的父母坟墓,甚至将骨灰倾倒出来 ;

  7月24日,香港“民阵”致信61个驻港总领馆和办事机构,要求他们对香港发出旅游警示 ;

  7月26日,部分示威者聚集在香港国际机场,围攻老人,骚扰乘客……种种暴力行为,不断突破法律、治安、道德、常识的底线。

  8月3日下午5时40分左右,有暴徒竟然拆走海港城前面旗杆上的国旗,扔入海中!

  8月5日晚,一部分极端激进分子来到香港尖沙咀天星码头,再次扯下“五支旗杆”上的国旗,并把国旗扔到海里。
 
       8月9日,香港网民发起所谓的机场“万人接机”行动,9日起一连三日到机场集会。据港媒报道,傍晚6时许,大厅内一男子和黑衣人发生冲突,现场一度混乱。

  8月11日,香港深水埗及长沙湾都有极端示威者聚集,香港警察施放催泪弹驱散示威者,拘捕多人。下午6时许,有暴徒在香港深水埗大南西街向警察投掷汽油弹。

  8月14日,8月13日晚至8月14日凌晨,大量示威者于香港国际机场非法集结,并禁锢、欺凌及殴打一名旅客及一名记者,对他们造成身心伤害,警方对激进示威者的严重暴力行为予以极严厉谴责
 

标签: 生活 新闻

评论(13) 浏览(1275)

使用html2canvas实现html页面截图效果

2019-8-15 WRZ 代码

前言:看到wordpress 最近比较流行的 文章海报生成功能,就用php的DG库生成了一个 效果看文章底部 海报生成。

之后百度搜了一下有没有别的方法生成图片,于是就搜到了html2canvas.js 这个页面截图工具 也可以生成自己想要的图片 并记录下来

1.下载html2canvas.js  百度网盘  密码:xbh1

2.在html页面中加载JQ库和此插件

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery2.2.4.min.js"></script>

3.简单的页面dome

<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
       <script type="text/javascript" src="js/jquery2.2.4.min.js"></script>
     <script type="text/javascript" src="js/html2canvas.js"></script>
        <script  type="text/javascript" >
        $(document).ready( function(){
                $(".example1").on("click", function(event) {
                        event.preventDefault();
                        html2canvas(document.getElementById('box'), {
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function(canvas) {
                            canvas.id = "mycanvas";
                            //document.body.appendChild(canvas);
                            //生成base64图片数据
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src =  dataUrl;
                            document.body.appendChild(newImg);
                        }
                    });
                });
        });
        </script>
    </head>
    <body>
        Hello!
        <div class="" id="box" style="background-color: #abc;">
            html5页面截图
        </div>
        <textArea id="textArea" col="20" rows="10" ></textArea>
        <input class="example1" type="button" value="截图">
        生成界面如下:
    </body>
</html>

4.更多的参数说明查看官网和github

官网:http://html2canvas.hertzen.com/

github:https://github.com/niklasvh/html2canvas

标签: 代码 教程

评论(8) 浏览(411)

纯css实现tooltip提示

2019-8-6 WRZ 代码

css实现优势是页面加载比较快 使用起来很方便

效果

使用方法

1.把css加载到你模板里面

[tooltip]{position:relative;}[tooltip]::after{display:none;content:attr(tooltip);position:absolute;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 15px;max-width:200px;border-radius:4px;box-shadow:0 10px 20px -5px rgba(0,0,0,0.4);z-index:100;}[tooltip]::before{display:none;content:'';position:absolute;border:5px solid transparent;border-bottom-width:0;z-index:100;}[tooltip]:hover::after{display:block;}[tooltip]:hover::before{display:block;}[tooltip][placement^="top"]::after,[tooltip][placement^="top"]::before{animation:anime-top 300ms ease-out forwards;}[tooltip][placement^="right"]::after,[tooltip][placement^="right"]::before{animation:anime-right 300ms ease-out forwards;}[tooltip][placement^="bottom"]::after,[tooltip][placement^="bottom"]::before{animation:anime-bottom 300ms ease-out forwards;}[tooltip][placement^="left"]::after,[tooltip][placement^="left"]::before{animation:anime-left 300ms ease-out forwards;}.tooltip-theme-dark,[tooltip]::after{color:#fff;background-color:#313131;}.tooltip-theme-light,[tooltip][effect="light"]::after{color:#313131;background-color:#fff;border:1px solid #313131;}.tooltip-placement-top,[tooltip]:not([placement])::after,[tooltip][placement=""]::after,[tooltip][placement="top"]::after{bottom:calc(100% + 10px);left:50%;transform:translate(-50%,0);}.tooltip-placement-top-right,[tooltip][placement="top-right"]::after{bottom:calc(100% + 10px);left:100%;transform:translate(-100%,0);}.tooltip-placement-top-left,[tooltip][placement="top-left"]::after{bottom:calc(100% + 10px);left:0;transform:translate(0,0);}.tooltip-placement-right,[tooltip][placement="right"]::after{left:calc(100% + 10px);top:50%;transform:translate(0,-50%);}.tooltip-placement-right-top,[tooltip][placement="right-top"]::after{left:calc(100% + 10px);top:0;transform:translate(0,0);}.tooltip-placement-right-bottom,[tooltip][placement="right-bottom"]::after{left:calc(100% + 10px);top:100%;transform:translate(0,-100%);}.tooltip-placement-bottom,[tooltip][placement="bottom"]::after{top:calc(100% + 10px);left:50%;transform:translate(-50%,0);}.tooltip-placement-bottom-right,[tooltip][placement="bottom-right"]::after{top:calc(100% + 10px);left:100%;transform:translate(-100%,0);}.tooltip-placement-bottom-left,[tooltip][placement="bottom-left"]::after{top:calc(100% + 10px);left:0;transform:translate(0,0);}.tooltip-placement-left,[tooltip][placement="left"]::after{right:calc(100% + 10px);top:50%;transform:translate(0,-50%);}.tooltip-placement-left-top,[tooltip][placement="left-top"]::after{right:calc(100% + 10px);top:0;transform:translate(0,0);}.tooltip-placement-left-bottom,[tooltip][placement="left-bottom"]::after{right:calc(100% + 10px);top:100%;transform:translate(0,-100%);}.triangle-theme-dark,[tooltip]::before{border-top-color:#313131;}.triangle-theme-light,[tooltip][effect="light"]::before{border-top-color:#313131;}.triangle-placement-top,[tooltip]:not([placement])::before,[tooltip][placement=""]::before,[tooltip][placement="top"]::before{bottom:calc(100% + 5px);left:50%;transform:translate(-50%,0);}.triangle-placement-top-left,[tooltip][placement="top-left"]::before{bottom:calc(100% + 5px);left:10px;}.triangle-placement-top-right,[tooltip][placement="top-right"]::before{bottom:calc(100% + 5px);right:10px;}.triangle-placement-right,[tooltip][placement="right"]::before,.triangle-placement-right-top,[tooltip][placement="right-top"]::before,.triangle-placement-right-bottom,[tooltip][placement="right-bottom"]::before{left:calc(100% + 3px);top:50%;transform:translate(0,-50%) rotateZ(90deg);}.triangle-placement-right-top,[tooltip][placement="right-top"]::before{top:10px;}.triangle-placement-right-bottom,[tooltip][placement="right-bottom"]::before{bottom:10px;top:auto;transform:translate(0,0) rotateZ(90deg);}.triangle-placement-bottom,[tooltip][placement="bottom"]::before,.triangle-placement-bottom-left,[tooltip][placement="bottom-left"]::before,.triangle-placement-bottom-right,[tooltip][placement="bottom-right"]::before{top:calc(100% + 5px);left:50%;transform:translate(-50%,0) rotateZ(180deg);}.triangle-placement-bottom-left,[tooltip][placement="bottom-left"]::before{transform:translate(0,0) rotateZ(180deg);left:10px;}.triangle-placement-bottom-right,[tooltip][placement="bottom-right"]::before{right:10px;left:auto;}.triangle-placement-left,[tooltip][placement="left"]::before,.triangle-placement-left-top,[tooltip][placement="left-top"]::before,.triangle-placement-left-bottom,[tooltip][placement="left-bottom"]::before{right:calc(100% + 3px);top:50%;transform:translate(0,-50%) rotateZ(270deg);}.triangle-placement-left-top,[tooltip][placement="left-top"]::before{top:10px;}.triangle-placement-left-bottom,[tooltip][placement="left-bottom"]::before{bottom:10px;top:auto;transform:translate(0,0) rotateZ(270deg);}@keyframes anime-top{from{opacity:.5;bottom:150%;}}@keyframes anime-bottom{from{opacity:.5;top:150%;}}@keyframes anime-left{from{opacity:.5;right:150%;}}@keyframes anime-right{from{opacity:.5;left:150%;}}

2.需要提示的html盒子里面加上

<a tooltip="点击加载更多" placement="top"></a>

tooltip=""  里面填写你要显示的内容
placement="" 填写显示的方式 

方向填写 (上 下 左 右 )英文单词即可, 其它方向可看css 懒得写了.........

 

 

标签: 代码 教程

评论(4) 浏览(736)

Emlog简单实现文章列表ajax不刷新分页

2019-8-5 WRZ 代码

   想给首页列表加一个不刷新下拉分页,之前的办法都是用jquery.ias.js 这个分页插件,但是加载这个插件 再加上你的配置 ,js文件就显得很大了 为了实现这么一个小功能加这么多js 真的是没那个必要。于是百度搜了一下找到了一个wordpress程序的ajax分页教程 把它移植到emlog  简单几行代码就可能实现 教程开始吧!

首先改造我们首页文件log_list.php 找到分页输出:

<div id="pagenavi">
	<?php echo $page_url;?>
</div>

修改为:

<div id="pagenavi">     
	<?php if ($total_pages > $page):?>  //如果总页大于当前页面
	<a href="<?php echo $pageurl . ($page + 1);?>"></a>// 就输出下一页地址
	 <?php endif;?>
</div>

在模板主要main.js里面加上 以下js  分为两种 你可以根据自己需求选择其中一种方法:

1.实现点击按钮不刷新实现下拉分页方法:

$("#pagenavi a").on("click", function(){  //点击分页按钮 
$.ajax({
type: "POST",
url: $(this).attr("href") ,
success: function(data){
result = $(data).find("#content .post");// 你文章样式class 这个根据自己列表样式修改的,不理解留言问我
nextHref = $(data).find("#pagenavi a").attr("href");
// 渐显新内容
$("#content").append(result.fadeIn(300));//你的文章列表样式class,不理解留言
if ( nextHref != undefined ) {
$("#pagenavi a").attr("href", nextHref);
} else {
$("#pagenavi").remove();// 若没有链接,即为最后一页,则移除分页输出
}
}
});
return false;
});

2.直接下拉滚动页面实现下拉分页方法:

$(window).on("scroll",function(){ // 给浏览器窗口绑定 scroll 事件
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // 判断窗口的滚动条是否接近页面底部
$.ajax({
type: "POST",
url: $(this).attr("href") ,
success: function(data){
result = $(data).find("#content .post"); //文章样式class 根据自己样式修改  
nextHref = $(data).find("#pagenavi a").attr("href");
// 渐显新内容
$("#content").append(result.fadeIn(300)); //文章列表样式class  根据自己情况修改
if ( nextHref != undefined ) {
$("#pagenavi a").attr("href", nextHref);
} else {
$("#pagenavi").remove(); // 若没有链接,即为最后一页,则移除分页输出
}
}
});
}
});

我是用的第1种方法 点击按钮分页 ,有问题请留言

 

标签: 代码

评论(10) 浏览(517)

Emlog 后台登录警告功能

2019-8-2 WRZ 作品

用phpmailer 做了一个emlog后台登录警告  只要登录错误 就会给我邮箱发送登录者的账号,密码,IP

算是一个后台安全加强吧!

效果截图:

 

 

 

 

标签: 代码

评论(2) 浏览(532)

使用git 把本地代码上传到gitlab分支上

2019-7-31 WRZ 代码

1.首页在本地找到你存放代码的文件夹 在空白处右键 单击:

git bash here

2.输入:

$ git clone xx@xxxxxx.git   //连接远程仓库, 连接远程仓库,注意这个xx@xxxxxx.git是你gitlab上的project的地址

3.克隆一下远程仓库建立你的分支 输入:

$ git branch wangrunze   // wangrunze是我取的分支名  这里你要换成你想取得分支

4.进入刚刚已经建立好的分支  输入:

$ git checkout wangrunze

5.现在开始上传文件到缓存区:

$ git add  文件名  //如果不想打文件名,可以把文件直接拖入黑框里自动生成文件名

6.给上传的文件添加备注以免和别人上传的文件冲突

$ git commit -m  daima    // daima 为是取的备注名 你可以修改你想要的

7.查看当前状态

$ git status 

8.最后把本地仓库代码推送到远程仓库(gitlab)

$ git push -u origin wangrunze    // wangrunze  是我刚刚建立的分支名

9.最后去gitlab上查看是否已经上传成功

 

标签: git 教程

评论(5) 浏览(603)

php简单实现一言/随机一句功能

2019-7-29 WRZ 代码

  1. 本文代码转自孟坤博客,因为一个工具模板用得上所以记录下来
  2. 首先准备一个代码编辑器新建一个php文件 名字随意,在文件里面复制以下代码:

     

    <?php
    // 存储数据的文件
    $filename = 'data.dat';        
     
    // 指定页面编码
    header('Content-type: text/html; charset=utf-8');
     
    if(!file_exists($filename)) {
        die($filename . ' 数据文件不存在');
    }
     
    // 读取整个数据文件
    $data = file_get_contents($filename);
     
    // 按换行符分割成数组
    $data = explode(PHP_EOL, $data);
     
    // 随机获取一行索引
    $result = $data[array_rand($data)];
     
    // 去除多余的换行符(保险起见)
    $result = str_replace(array("\r","\n","\r\n"), '', $result);
     
    echo $result;
  3. 之后再新建一个xxx.dat 文件 名字你随意  在里面添加你要显示的句子 一行一条  
  4. 调用方法:
    js调用方法:
    <script src="http://你的网址.cn/api.php"></script>
    
    php调用方法:
    把之前保存的php文件中最后一行的 echo $result;  修改成
    echo 'document.write("'.htmlspecialchars($result).'");';
  5. 效果演示:http://wangrunze.com/tools/api/yiyan.php

 

标签: 代码

评论(3) 浏览(664)