SKILL.NULL - Page 13 of 16

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：

<!DOCTYPE html>

<html>

<head>

<title>原来你是这样的毛玻璃</title>

</head>

<style>

@keyframes ants {

to {

background-position: 100%;

}

body, main:before {

background: url("demoImages/1.jpg") 0 /cover fixed;

}

main {

position: relative;

background: hsla(0, 0%, 100%, .3);

overflow: hidden;

display: block;

margin: 200px auto;

width: 1000px;

height: 500px;

}

main:before {

content: '';

position: absolute;

top: 0%;

right: 0%;

left: 0%;

bottom: 0%;

filter: blur(10px);

margin: -30px;

}

.demoBox {

border: .5em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

animation: ants 12s linear infinite;

}

.demo {

position: relative;

z-index: 999;

font-size: 5em;

text-align: center;

line-height: 5;

font-weight: 100;

}

</style>

<body>

<div class="demo">原来你是这样的毛玻璃</div>

</main>

</body>

</html>

效果图：

2018-12-03by SKILLNULL HTML&CSS 阅读(8701)评论(0)

CSS3边框会动的信封

<!DOCTYPE html>

<html>

<head>

<title>酷炫的CSS3</title>

</head>

<style>

@keyframes ants {

to {

background-position: 100%;

}

.demo {

display: block;

margin: 200px auto;

width: 300px;

height: 200px;

border: 1em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

animation: ants 12s linear infinite;

}

</style>

<body>

</body>

</html>

静态效果图：

2017-07-20by SKILLNULL HTML&CSS 阅读(8796)评论(0)

判断当前系统当前浏览器是否安装启用 Adobe Flash Player，检查在chrome中的状态

一、判断当前所在系统

let sUserAgent = navigator.userAgent;

let isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");

let isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");

if (isMac) return "Mac";

let isUnix = (navigator.platform == "X11") && !isWin && !isMac;

if (isUnix) return "Unix";

let isLinux = (String(navigator.platform).indexOf("Linux") > -1);

if (isLinux) return "Linux";

if (isWin) {

let isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;

if (isWin2K) return "Windows2000";

let isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;

if (isWinXP) return "WindowsXP";

let isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;

if (isWin2003) return "Windows2003";

let isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;

if (isWinVista) return "WindowsVista";

let isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;

if (isWin7) return "Windows7";

let isWin8 = sUserAgent.indexOf("Windows NT 6.2") > -1 || sUserAgent.indexOf("Windows 8") > -1;

if (isWin8) return "Windows8";

let isWin10 = sUserAgent.indexOf("Windows NT 10.0") > -1 || sUserAgent.indexOf("Windows 10") > -1;

if (isWin10) return "Windows10";

}

return "OtherOS";

二、判断当前浏览器内核

let Sys = {};

let ua = navigator.userAgent.toLowerCase();

let s;

(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :

(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :

(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :

(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

if (Sys.ie) {

console.log('ie core')

}

if (Sys.firefox) {

console.log('gecko core')

}

if (Sys.chrome || Sys.safari) {

console.log('webkit core')

}

三、判断浏览器是否安装 Adobe Flash Player
[crayon-680e4c45b10bf[……]

2017-07-20by SKILLNULL JavaScript 阅读(8755)评论(0)

Js跑马灯效果 && 在Vue中使用

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

DEMO:

<!DOCTYPE html>

<html>

<head>

　　<style>

　　　　.content {

　　　　　　height: 60px;

　　　　　　background-color: #2c2c34;

　　　　　　overflow: hidden;

　　　　}

　　　　.content ul {

　　　　　　white-space: nowrap;

　　　　}

　　　　.content ul li {

　　　　　　position: relative;

　　　　　　font-size: 14px;

　　　　　　vertical-align: middle;

　　　　　　line-height: 35px;

　　　　　　padding: 0 8px;

　　　　　　white-space: nowrap;

　　　　　　display: inline-block;

　　　　　　color: #fff

　　　　}

　　　　#scrollBox {

　　　　　　overflow: hidden;

　　　　}

　　　　#scrollBox .scrollWrap {

　　　　　　width: 500%

　　　　}

　　　　.scrollCont {

　　　　　　float: left;

　　　　}

　　</style>

</head>

<body>

　　　　<ul>

　　　　　　　　　　　　<li>我是第一条数据</li>

　　　　　　　　　　　　<li>我是第二条数据</li>

　　　　　　　　　　　　<li>我是第三条数据</li>

　　　　　　　　　　　　<li>我是第四条数据</li>

　　　　　　　　　　　　<li>我是第五条数据</li>

　　　　　　　　　　　　<li>我是第六条数据</li>

　　　　　　　　　　　　<li>我是第七条数据</li>

　　　　　　　　　　　　<li>我是第八条数据</li>

　　　　　　　　　　</div>

　　　　　　　　</div>

　　　　</ul>

　　</div>

　　　　let speed = 40

　　　　let scrollBox = document.getElementById("scrollBox");

　　　　let scrollContOne = document.getElementById("scrollContOne");

　　　　let scrollContTwo = document.getElementById("scrollContTwo");

　　　　scrollContTwo.innerHTML = scrollContOne.innerHTML;

　　　　scrollBox.scrollLeft = 0;

　　　　function scrollRadio() {

　　　　　　if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) {

　　　　　　　　scrollBox.scrollLeft -= scrollContOne.offsetWidth

　　　　　　} else {

　　　　　　　　scrollBox.scrollLeft += 2;

　　　　　　}

　　　　let MyScrollRadio = setInterval(scrollRadio, speed);

　　　　scrollBox.onmouseover = function() {

　　　　　　clearInterval(MyScrollRadio)

　　　　};

　　　　scrollBox.onmouseout = function() {

　　　　　　MyScrollRadio = setInterval(scrollRadio, speed)

　　　　};

　　</script>

</body>

</html>

在Vue中使用：

　　　　<ul>

　　　　　　　　　　　　</li>

　　　　　　　　　　</div>

　　　　　　　　</div>

　　　　</ul>

　　</div>

</template>

　　.content {

　　　　height: 60px;

　　　　background-color: #2c2c34;

　　　　overflow: hidden;

　　}

　　.content ul {

　　　　white-space: nowrap;

　　}

　　.content ul li {

　　　　position: relative;

　　　　font-size: 14px;

　　　　vertical-align: middle;

　　　　line-height: 35px;

　　　　padding: 0 8px;

　　　　white-space: nowrap;

　　　　display: inline-block;

　　}

　　.content ul li a {

　　　　text-decoration: none;

　　　　color:#fff;

　　}

　　#scrollBox {

　　　　overflow: hidden;

　　　　margin-left: 36px;

　　}

　　#scrollBox .scrollWrap {

　　　　width: 500%

　　}

　　.scrollCont {

　　　　float: left;

　　}

</style>

export default {

　　data: () => ({

　　　　canScrollTimer: 0

　　}),

　　vuex: {

getters: {

scrollLists: state => state.scrollLists

}

　　watch:{

　　　scrollLists:{

　　　　deep:true,

　　　　handler(v,ov){

　　　　　　if(v.length){

　　　　　　　　　　this.run();

　　　　　　　　}

　　methods: {

　　　　run() {

　　　　　　let speed = 40;

　　　　　　let scrollBox = document.getElementById("scrollBox");

　　　　　　let scrollContOne = document.getElementById("scrollContOne");

　　　　　　let scrollContTwo = document.getElementById("scrollContTwo");

　　　　　　scrollContTwo.innerHTML = scrollContOne.innerHTML;

　　　　　　scrollBox.scrollLeft = 0;

　　　　　　function scrollRadio() {

　　　　　　　　if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) {

　　　　　　　　　　scrollBox.scrollLeft -= scrollContOne.offsetWidth

　　　　　　　　} else {

　　　　　　　　　　scrollBox.scrollLeft += 2;

　　　　　　　　}

　　　　　　let MyScrollRadio = setInterval(scrollRadio, speed);

　　　　　　scrollBox.onmouseover = function() {

　　　　　　　　clearInterval(MyScrollRadio)

　　　　　　};

　　　　　　scrollBox.onmouseout = function() {

　　　　　　　　MyScrollRadio = setInterval(scrollRadio, speed)

　　　　　　};

　　　　}

　　ready() {

　　　　//接口调用

　　}

</script>

2018-12-03by SKILLNULL JavaScript, Vue 阅读(7738)评论(0)

Vue获取DOM元素样式 && 样式更改

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误，这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：

</div>

</template>

　　export default {

　　mounted () {

　　 console.log(this.$refs.abc.style.cssText)

　　}

</script>

<strong><span style="color: #ff0000;">结果是 display: block;</span></strong>

[[……]

2017-06-30by SKILLNULL Vue 阅读(12076)评论(0)

解决Vue方法中setTimeout改变变量的值无效

把data里的变量继承过来重新封装一下

let that = this;

this.rightAnswer = false;

setTimeout(function() {

that.rightAnswer = true;

}, 1500)

2017-07-21by SKILLNULL Vue 阅读(8591)评论(0)

JS获取当前时间及时间戳相互转换

1.获取当前时间的时间戳

　　Date.parse(new Date())

　　结果：1486347562000

2.获取当前时间

　　new Date()

　　结果：Mon Feb 06 2017 10:19:42 GMT+0800 (CST)

3.将时间戳转换成时间

　　new Date(1486347562000)

　　结果：Mon Feb 06 2017 10:19:22 GMT+0800 (CST)

4.将时间转换成时间戳　　

　　Date.parse(new Date("2017-02-06 10:30:50"))

　　结果：1486348250000

2018-12-03by SKILLNULL JavaScript 阅读(7416)评论(0)

根据窗口大小改变悬浮窗显示方式并自动刷新页面

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

如果一个页面有个浮动的二维码，当页面窗口缩小时二维码会遮盖住页面内容，这时候可以根据浏览器大小来决定显示方式：

1.当页面宽度足够大时，完全显示二维码

2.当页面窗口缩小时，这时候需要显示一个按钮，点击按钮才显示二维码

这时候需要添加onresize来监听窗口变化，以此来刷新页面：

window.onresize = function() { //监听窗口变化

　　window.location.reload(); //兼容chrome safari

　　window.location.href = ""; //兼容火狐

}

至于上面二维码的显示方式，在 vue 里使用 v-show 实现非常方便：

HTML:

　　<ul>

　　　　<li><img src="../assets/images/yinruyi.png" alt="银如意" title="银如意"><span>扫描下载银如意app</span></li>

　　　　<li><img src="../assets/images/tangulunyin.jpg" alt="谈股论银"><span>扫描关注谈股论银公众号</span></li>

　　</ul>

</div>

CSS:

.qr-btn {

　　width: 30px;

　　height: 30px;

　　background-color: #064491;

　　display: block;

　　position: absolute;

　　left: 20px;

　　bottom: 50px;

　　border-radius: 50%;

　　box-shadow: 2px 2px 8px rgba(0, 0, 0, .6);

　　cursor: pointer

}

.qr-btn>img {

　　width: 20px;

　　height: 20px;

　　position: relative;

　　top: 5px;

　　display: block;

　　padding: 0 auto;

　　margin: 0 auto;

}

.qr-code {

　　position: fixed;

　　bottom: 10%;

　　left: 1%;

　　background-color: aliceblue;

　　font-size: 12px;

　　text-align: center;

}

.qr-code>ul>li {

　　padding: .8em;

}

.qr-code>ul>li:last-child {

　　margin: 0 0 1em 0;

}

.qr-code>ul>li>img {

　　width: 130px;

　　height: 130px;

　　display: block;

}

VUE:

export default {

　　data:()=>({　　

　　　　qrCode: false,

　　　 qrBtn: false

　　})

methods:{　　

　　showQr() {

　　　　if (this.qrCode == false) {

　　　　　　this.qrCode = true;

　　　　} else {

　　　　　　this.qrCode = false;

　　　　}

ready(){

　　let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

　 let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

　　if (w < 1330) { //根据屏幕宽度决定是显示二维码还是按钮

　　　　this.qrCode = false;

　　　　this.qrBtn = true;

　　} else {

　　　　this.qrCode = true;

　　　　this.qrBtn = false;

　　}

　　window.onresize = function() { //监听窗口变化

　　　　window.location.reload(); //兼容chrome safari

　　　　window.location.href = ""; //兼容火狐

　　}

-------------------------------------------------------------------

以上的方法比较耗性能，而且不安全，另一个方法：

VUE:

export default {

　　data:()=>({　　

　　　　qrCode: false,

　　　　qrBtn: false

　　})

methods:{　　

　　showQr() {

　　　　if (this.qrCode == false) {

　　　　　　this.qrCode = true;

　　　　} else {

　　　　　　this.qrCode = false;

　　　　}

　　listen() {

　　　　let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

　　　　if (w < 1330) { //根据屏幕宽度决定是显示二维码还是按钮

　　　　　　this.qrCode = false;

　　　　　　this.qrBtn = true;

　　　　} else {

　　　　　　this.qrCode = true;

　　　　　　this.qrBtn = false;

　　　　}

　ready(){

　　　　this.listen();

　　　　window.onresize = () => { //监听窗口变化

　　　　　　this.listen();

　　　　}

2018-12-03by SKILLNULL JavaScript, Vue 阅读(7966)评论(0)

常用 Git 命令

拉取远端仓库代码：

如果本地已经存在文件夹，先cd进去，然后敲命令：

git fetch （作用是拉取远端仓库里的代码）

git merge （作用是将远端仓库里的代码与本地仓库里的代码合并，如果有冲突会提示，这时候需要讲不正确的代码删除）

提交本地仓库的代码到远端仓库：

git status （作用是查看仓库的状态）

git add . （监控本地仓库的状态树，将本地仓库的所有变化提交到暂存区，包括文件内容修改modified以及新文件new，但是不包括被删除的文件）

|| git add -u（小写的u，仅监控已经被add的文件（即 tracked file），会将被修改的文件提交到暂存区。add -u不会提交新文件（untracked file）

|| git add -A (是前面两个功能的集合）

git commit -m"备注信息" （作用是将代码提交到本地仓库）

git log （查看git日志）

git push （作用是将代码提交到远端服务器仓库）

这时候如果提示有冲突的话，我们就需要执行 git fetch 和 git merge 命令了，处理完冲突以后再重新push。

如果是第一次向远端仓库提交代码，需要执行以下命令：

首先要进入项目的文件夹，然后

git init （作用是创建本地仓库，加将会在文件夹下创建一个 .git 文件夹，.git 文件夹里存储了所有版本信息、标记等内容。注：如果整个项目文件夹是拷贝过来的，这时候需要先将文件夹内的 .git 文件夹删除后再执行init）

git remote add origin git@192.168.19.154:TG/zhibo.git（作用是将本地仓库与远程仓库关联起来。如果不执行这个命令的话，每次push的时候都要指定远程服务器的地址。）

然后再执行提交命令。

版本回退：

git reset --hard HEAD^ //回退到上个版本

git reset --hard HEAD^^ //回退到上上个版本

git reset --hard HEAD~100 //回退到前100个版本

git reflog //查看版本信息

git reset --hard 版本号 //回退到指定版本

用户名和邮箱：

git config user.name //查看当前用户名

git config user.email //查看当前邮箱

git config --global user.name "your name that want to change" // 更改用户名

git config --global user.email xxx@xxx.com // 更改邮箱

操作远程仓库：

git remote -v //查看当前仓库

git remote add <name> <url> //添加远程仓库

git remote set-url <name> <url> //切换远程仓库地址

git remote rm <name> //删除远程仓库

2018-12-03by SKILLNULL Git 阅读(7690)评论(0)

解决css3毛玻璃效果(blur)有白边问题

做一个登录页，全屏背景图毛玻璃效果，实现方法如下：

HTML：

<body>

　　</div>

　　　　var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

　　　　var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

　　　　$('.login-mask').css("height", h);

　　　　$('.login-mask').css("width", w);

　　</script>

</body>

CSS：

.login-wrap {

　　overflow: hidden;

}

.login-mask {

　　/* IE6~IE9 */

　　filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false);

　　-webkit-filter: blur(100px);

　　-moz-filter: blur(100px);

　　-ms-filter: blur(100px);

　　filter: blur(100px);

　　background-image: url(../../../img/background/home-bg-3.jpg);

　　background-repeat: no-repeat;

　　background-size: cover;

　　background-attachment: fixed;

　　background-position: center;

　　position: absolute;

　　z-index: 1;

}

.login-box {

　　width: 300px;

　　height: 400px;

　　background-color: rgba(255, 255, 255, 0.5);

　　display: block;

　　border: 1px solid rgba(183, 183, 183, 0.47);

　　border-radius: 6px;

　　position: absolute;

　　left: 50%;

　　margin-right: auto;

　　margin-left: -150px;

　　margin-top: 10%;

　　z-index: 2;

}

效果如下：

可以发现边上是有白边的，这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。

效果图如下：

仔[……]

2018-12-03by SKILLNULL HTML&CSS 阅读(13722)评论(0)

2025年四月
一	二	三	四	五	六	日
« 1月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30