|
1 2 3 4 5 6 7 8 9 10 11 |
把data里的变量继承过来重新封装一下 let that = this; this.rightAnswer = false; setTimeout(function() { that.rightAnswer = true; }, 1500) |
分类：前端
JS获取当前时间及时间戳相互转换
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 |
根据窗口大小改变悬浮窗显示方式并自动刷新页面
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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: <!-- 按钮 --> <div class="qr-btn" v-show="qrBtn" @click="showQr"><img src="../assets/images/tangulunyin.jpg" alt="谈股论银"></div> <!-- 二维码 --> <div class="qr-code" v-show="qrCode"> <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(); } } } |
解决css3毛玻璃效果(blur)有白边问题
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
做一个登录页，全屏背景图毛玻璃效果，实现方法如下： HTML： <body> <div class="login-wrap"> <div class="login-mask"></div> <div class="login-box"></div> </div> <script> 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%;就行了。
效果图如下：
仔[……]
ajax循环读取json多维数组
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
test.json: { "one": [ { "name": "黑默丁格", "car": "鲁LLL608", "mobil": "15666666666", "mount": "1", "time": "2016-07-13", "cat": "保养", "state": "有效", "message":"长安福特4S店温馨提醒:是时候给您的爱车去做保养了。" }, { "name": "EZ", "car": "鲁LLL608", "mobil": "15666666666", "mount": "1", "time": "2016-07-13", "cat": "保养", "state": "有效", "message":"长安福特4S店温馨提醒:是时候给您的爱车去做保养了。" } ], "two": [ { "name": "机器人", "car": "鲁LLL608", "mobil": "15666666666", "mount": "1", "time": "2016-07-13", "cat": "保养", "state": "有效", "message": "长安福特4S店温馨提醒:是时候给您的爱车去做保养了。" }, { "name": "贾克斯", "car": "鲁LLL608", "mobil": "15666666666", "mount": "1", "time": "2016-07-13", "cat": "保养", "state": "有效", "message":"长安福特4S店温馨提醒:是时候给您的爱车去做保养了。" } ] } |
ajax：
效果：
让textarea完全显示文章并且不滚动、不可拖拽、不可编辑
浏览器滚动条样式更改
|
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 31 32 33 34 |
::-webkit-scrollbar { // 滚动条整体部分 width: 6px; height: 8px; } ::-webkit-scrollbar-track { // 外层轨道 background-color: #eee; border-radius: 4px; } ::-webkit-scrollbar-track-piece { // 内层滚动槽 background-color: #eee; border-radius: 4px; } ::-webkit-scrollbar-thumb { // 滚动的滑块 background: rgba(32, 33, 36, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(32, 33, 36, 0.4); width: 10px; } ::-webkit-scrollbar-corner { // 边角 display: none; } ::-webkit-scrollbar-button { // 滚动条两端的按钮 display: none; } 注：目前仅Chrome下生效 |
图片加载失败显示默认图片占位符
JS根据不同浏览器(分辨率)调用不同css
|
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 31 32 33 34 35 |
根据不同浏览器： <script type="text/javascript"> var version = navigator.userAgent; if (version.indexOf("MSIE") > 1) { document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>"); } else if (version.indexOf("Chrome") > 1) { document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>"); } else if (version.indexOf("Firefox") > 1) { document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>"); } </script> 根据不同分辨率： <script type="text/javascript"> if (screen.width == 1024){ document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>"); }else { document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");} </script> |