2019-02-14 15:17:14 |  0 Comments

Electron 入门笔记


需求是把H5页面变成PC端的可执行程序,最好是Windows Mac Linux 3端都支持,百度一番以后决定用Electron来实现。

node和Electron 我都是刚学,所以本文只是分享一下折腾的过程


官方入门例子

https://electronjs.org/docs/tutorial/first-app#trying-this-example


 2019-01-29 16:14:48 |  0 Comments

【zzzmh个人博客】一枚Java程序的个人建站之路 (干货)

![zzzmh.cn](https://upload-images.jianshu.io/upload_images/15934130-56ba7ce0ec66d1e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 目前版本的博客地址: [https://zzzmh.cn](https://zzzmh.cn) 图片演示: ![z
 2019-01-25 11:51:04 |  0 Comments

simpleMDE.js 轻松打造一个类似简书的纯前端MarkDown语法编辑器

![](https://leanote.com/api/file/getImage?fileId=5c4a89bbab644108f0000560) 一直想搞一个纯前端的markdown编辑器+解析器。 将个人博客[zzzmh.cn](https://zzzmh.cn) 的文章语法用markdown实现。 既可以大幅节省写文章耗费时间,也能通用到简书或思否。 试了多个纯前端markdown库以
 2019-01-23 15:52:26 |  0 Comments

Animate.css 超强CSS3动画库,三行代码搞定H5页面动画特效!

```javascript function animateCss(element, animationName,times, callback) { const nodes = document.querySelectorAll(element) nodes.forEach((node => { if(times) node.style.setProperty
 2019-01-22 11:20:49 |  0 Comments

Jsoup爬虫获取自己网站在百度搜索中的实时排名

![](https://upload-images.jianshu.io/upload_images/15934130-2e44ef11c5b9ee15.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 一直有一个需求,希望看到自己网站在百度的实时的排名 用过一些工具,要么反应迟钝,要么结果不准确或不实时 于是打算用jsoup写一个
 2019-01-14 13:47:17 |  0 Comments

网站获得广告收入方法 通过阿里妈妈、腾讯云


鄙人不才,建站足有半年有余
博客zzzmh.cn
壁纸bz.zzzmh.cn
插件chrome.zzzmh.cn


粗(初)布算了一笔账,没有杂七杂八的优惠,一般来说建站开支少说要30¥ ~ 150¥每月。。。
那么如果想长期经营,最好能有一笔微薄的收益来支撑这些成本。
最简单的当然可以放个微信支付宝的收款码求打赏。
那么今天简单说下除此之外,几个也许可以获取微薄收

 2019-01-09 20:16:14 |  0 Comments

Isotope.js 前端响应式JS插件 动态实现瀑布流布局排版、筛选、排序等功能


官网地址: https://isotope.metafizzy.co/

博客地址: https://zzzmh.cn/single?id=56

在线项目效果: https://chrome.zzzmh.cn/


Isotope.js 前端响应式JS插件 动态实现瀑布流布局排版、筛选、排序等功能


入门用法

1、筛选过滤

(官网例子: https://is

 2019-01-09 11:24:18 |  0 Comments

新站上线,分享10个最强chrome浏览器插件!瞬间开发效率加倍




新站【极简插件】打磨已久,终于上线!

访问地址:https://chrome.zzzmh.cn




借此机会,推荐10个最强chrome插件,瞬间开发效率加倍



1、Vue Devtools

用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展。Chrome devtools扩展用于调试Vu

 2019-01-04 15:18:24 |  0 Comments

linux deepin 初试 hexo

 

linux deepin下hexo入门

 

 

 

先安装git npm依赖

sudo apt install git
sudo apt install npm

 

一、安装

安装hexo

sudo npm install -g hexo
sudo npm install -g hexo-cli

 

初始化

hexo init blog
cd blog
 2019-01-04 10:53:03 |  0 Comments  |  blue

H5页面加载中loading特效 第二弹(基于原生JS CSS)

 

 

上一篇博客已经实现了第一种加载中特效,地址: https://zzzmh.cn/single?id=51

最近用在新网站 https://chrome.zzzmh.cn 后发现问题,刷新频率高的情况下,动画太多反而引起不适。

故又用同样方案,重做了一个好看又干净的loading加载中动画,用法和之前一样,也是基于原生js css,无第三方依赖。

 

 

loading.js

 document.body.innerHTML += ('<div id="preloader-body"><div id="cube-wrapper"><div class="cube-folding"><span class="leaf1"></span><span class="leaf2"></span><span class="leaf3"></span><span class="leaf4"></span></div><span class="loading"data-name="Loading">Loading</span></div></div>');
window.onload = function () {
    document.getElementById('cube-wrapper').style.display = "none";
    document.getElementById('preloader-body').style.display = "none";
}

 

 

 loading.css

 #preloader-body{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999;

}
.cube-folding {
  width: 50px;
  height: 50px;
  display: inline-block;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
Title - Artist
0:00