前端 - Page 9 of 12

禁止 iphone 网页上下拖动露底

document.addEventListener('touchmove', function(e) {

e.preventDefault();

});

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

文本行的斑马条纹

周知，表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了：

tr:nth-child(even){

　　background-color: rgba(0,0,0,.2);

}

但是把这种效果运用在文本行的时候就有点力不从心了，尽管js可以实现这种功能，但是这在理论上有违纯粹原则（javascri[……]

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

自定义优雅的文本下划线

废话不多说：

.underline {

background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;

background-size: .2em 2px;

background-position: 0 1.4em;

}

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

效果：

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

Vue根据URL传参来控制全局 console.log 的开关

如果你的项目中console.log了很多信息，但是发到生产环境上又不想打印这些信息，这时候就需要设置一个全局变量，如：debug，

用正则匹配一下参数：

const getQueryStr = (name) => {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

};

当链接中含有这个参数时，将debug的状态置为true，这时console.log是正常可打印状态，否则将debug的状态置为false，

这时重写console.log函数：

console.log = function () {

return false;

}

这时的全局变量就可以用在整个项目中了，用来控制一些调试窗口的显隐。

在Vue中可以直写在stores/index.js中,当然，写在其他入口文件里也可以：

const getQueryStr = (name) => {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

};

/* 若链接后面带上参数 envFlag=monitor

* 则将 debug 置为true，否则置为false

const monitor = 'monitor';

const envFlag = getQueryStr('envFlag');

let debug = monitor ? true : false;

if (envFlag === 'monitor') {

console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");

debug = monitor;

} else {

debug = '';

console.log = function () {

return false;

}

const state = {debug: debug};

export const store = new vuex.Store({state, mutations});

这时候如果你想控制一个组件的显示或隐藏，只需要在vuex的getters中声明一下就可以使用变量debug了：

vuex: {

getters: {

<span style="color: #ff0000;">debug: state => state.debug</span>

}

做完以上的工作后，在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来，同时打开控制台的话，

就可以看到项目所有的 console.log 信息。

2018-12-03by SKILLNULL Vue 阅读(8905)评论(0)

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖，看了 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 阅读(8026)评论(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 阅读(8118)评论(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-6741044915d35[……]

2017-07-20by SKILLNULL JavaScript 阅读(8251)评论(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 阅读(7094)评论(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 阅读(11160)评论(0)

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

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

let that = this;

this.rightAnswer = false;

setTimeout(function() {

that.rightAnswer = true;

}, 1500)

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

2024年十一月
一	二	三	四	五	六	日
« 8月
				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