前端 - Page 10 of 12

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

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

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

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:

　　<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 阅读(7320)评论(0)

解决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>

　　　　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 阅读(12942)评论(0)

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：

效果：

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

让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

1

2

3

4

5

6

7

8

9

10

11

textarea {

　　width: 100%;

　　border: none;

　　outline: none;

　　resize: none;

　　overflow: hidden;

　　padding-bottom: 100%;

　　background-color: inherit;

}

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

浏览器滚动条样式更改

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下生效

2021-07-06by SKILLNULL HTML&CSS 阅读(7613)评论(0)

图片加载失败显示默认图片占位符

为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。

<img src=”__PUBLIC__/img/simple/simplelove.png” onerror=”onerror=null;src=’__PUBLIC__/img/defaultpic.jpg'”&gt[……]

2017-08-14by SKILLNULL HTML&CSS 阅读(7775)评论(0)

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

根据不同浏览器：

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>

根据不同分辨率：

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>

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

为 placeholder 自定义样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

textarea::-webkit-input-placeholder{

　　padding: 1em;

}

textarea::-moz-placeholder{

　　padding: 1em;

}

<span style="color: #339966;">同理，input的定义方法为：</span>

input::-webkit-input-placeholder{

　　padding: .2em;

}

input::-moz-placeholder{

　　padding: .2em;

}

2017-08-14by SKILLNULL HTML&CSS 阅读(6727)评论(0)

关于HTML5在动画制作工具Animatron的一些问题

Animatron是国外一款在线HTML5动画制作工具，网址：www.animatron.com 当然，想使用的话，是需要FQ的。

用animatron制作好的动画是可以下载为代码和GIF的，这时候付费玩家自然又是充满优越感的，因为付费玩家可以下载普通玩家下不到的部分。

下载下来的文件夹[……]

2018-12-03by SKILLNULL HTML&CSS 阅读(7440)评论(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