SKILLNULL, Author at SKILL.NULL

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

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

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

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

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

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

在HTML中禁止文字的复制

很简单，只需在<body>中添加如下代码：

1

2

3

4

5

6

7

<body oncontextmenu='return false'

ondragstart='return false'

onselectstart='return false'

onselect='document.selection.empty()'

oncopy='document.selection.empty()'

onbeforecopy='return false'

onmouseup='document.selection.empty()'>

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

JS返回上一页

<button onclick=”javascript:history.go(-1);”>返回上一页</button>

<button onclick=”javascript:history.back(-1);”>返回上一页</button>[……]

2017-08-14by SKILLNULL JavaScript 阅读(6428)评论(0)

当一个页面出现多个checkbox全选时的处理

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

HTML：

<input type="checkbox" onclick="boxOnclick(this,'some1')">全选一

<input type="checkbox" onclick="boxOnclick(this,'some2')">全选二

<input type="checkbox" onclick="boxOnclick(this,'some3')">全选三

<input type="checkbox" class="some1">全选一的子集

<input type="checkbox" class="some2">全选二的子集

<input type="checkbox" class="some3">全选三的子集

JS：

function boxOnclick(obj, someNum) {

　　if (obj.checked) {

　　　　$("." + someNum).each(function () {

　　　　　　this.checked = true;

　　　　});

　　} else {

　　　　$("." + someNum).each(function () {

　　　　　　this.checked = false;

　　　　});

　　}

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

JS获取浏览器高度并赋值给类

1

2

3

4

5

6

7

8

9

10

11

12

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

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

如果你需要给某个div设置全屏的话，可以用下面的jQuery来获取设备高度，然后赋值给类。

$(window).load(function () {

var maxHeight = 0;

if (document.documentElement.clientHeight > maxHeight) {

maxHeight = document.documentElement.clientHeight;

}

$('.you-class').css("height", maxHeight)

});

2017-08-14by SKILLNULL JavaScript 阅读(5957)评论(0)

点击按钮对两个div的隐藏与显示进行切换

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

HTML：

<button type="button" id="showHidden">点击切换div的隐藏与显示</button>

<div id="div1">请叫我第一层</div>

<div id="div2">请叫我第二层</div>

JS:

function show_hidden(obj) {

　　if(obj.style.diaplay == 'block') {

　　 obj.style.display = 'none';

　　} else {

　　　　　obj.style.display = 'block';

　　}

var sh = document.getElementById("showHidden");

sh.click = function() {

var div1 = document.getElementById("div1");

var div2 = document.getElementById("div2");

show_hidden(div1);

show_hidden(div2);

return false;

}

</script>

示例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button type="button" id="showHidden">点击切换div的隐藏与显示</button>

<div id="div1" style="display:block">请叫我第一层</div>

<div id="div2" style="display:none">请叫我第二层</div>

function show_hidden(obj) {

　　if(obj.style.display == 'block') {

　　 obj.style.display = 'none';

　　} else {

　　　　　obj.style.display = 'block';

　　}

var sh = document.getElementById("showHidden");

sh.onclick = function() {

var div1 = document.getElementById("div1");

var div2 = document.getElementById("div2");

show_hidden(div1);

show_hidden(div2);

return false;

}

</script>

</body>

</html>

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

隐藏 < input type="file" > 实现点击div或图片打开文件选择路径

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

　　<div onclick="addfile()">点击上传图片</div>

　　　function addfile() {

　　　　document.getElementById("addfile-btn").click();

　　　}

　　</scrip>

<strong>如果一个页面需要多个这种事件的话，显然用ID是不太好的，那么就可以通过jQuery的prev来实现同级class查找，以此实现上传控件的调用。</strong>

<div class="upload">点击上传图片1</div>

<div class="upload">点击上传图片2</div>

$(".upload").bind('click', function() {

$(this).prev(".addfile-btn").click();

});

</script>

实现点击div或图片打开文件选择路径">

2017-08-18by SKILLNULL JavaScript 阅读(7135)评论(0)

CSS3混合模式background-blend-mode

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<strong>注意：background属性中的背景图片和颜色混合，只能在一个background属性中。</strong>

属性值：

background-blend-mode: normal; //正常

background-blend-mode: multiply; //正片叠底

background-blend-mode: screen; //滤色

background-blend-mode: overlay; //叠加

background-blend-mode: darken; //变暗

background-blend-mode: lighten; //变亮

background-blend-mode: color-dodge; //颜色减淡

background-blend-mode: color-burn; //颜色加深

background-blend-mode: hard-light; //强光

background-blend-mode: soft-light; //柔光

background-blend-mode: difference; //差值

background-blend-mode: exclusion; //排除

background-blend-mode: hue; //色相

background-blend-mode: saturation; //饱和度

background-blend-mode: color; //颜色

background-blend-mode: luminosity; //亮度

background-blend-mode: initial; //初始

background-blend-mode: inherit; //继承

background-blend-mode: unset; //复原

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

实现笛卡尔心形线的重复循环绘制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

HTML部分:

1.<a onclick="logoClick()"></a>

2.<div id="canvasZone">

</div>

CSS部分：

#canvasZone {

width: 100%;

height: 100%;

text-align: center;

padding-top: 20px;

margin-left: -35px;

}

#myCanvas {

height: 300px;

width: auto;

}

JS部分：

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

var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。

var r = 4;

var radian;//弧度

var i;

var radianDecrement;//弧度增量

var time = 15;//每个点之间的时间间隔

var intervalId;

var num = 618;//分割为 618 个点

var startRadian = Math.PI;

var ctx;

function logoClick () {

startAnimation();

window.setInterval("lisner()", 1);//监听事件，监听是否画所有的点

}

function lisner () {

if (i >= num) {//判断点是否画完

i = 0;//当所有的点画完即进行初始化

//清空画布("#canvasZone").empty();

// 清空画布("#canvasZone").append("<canvas id=\"myCanvas\"></canvas>");

// 重新建立画布并开始进行内容绘制

("#canvasZone").empty();

startAnimation();

}

function startAnimation () {

ctx = document.getElementById("myCanvas").getContext("2d");

//让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。

WINDOW_HEIGHT = document.documentElement.clientHeight - 20;

WINDOW_WIDTH = document.documentElement.clientWidth - 20;

ctx.width = WINDOW_WIDTH;

ctx.heigh = WINDOW_HEIGHT;

drawHeart();

}

function drawHeart () {

ctx.strokeStyle = "red";

ctx.lineWidth = 1;//设置线的宽度

radian = startRadian;//弧度设为初始弧度

radianDecrement = Math.PI / num * 2;

ctx.moveTo(getX(radian), getY(radian));//移动到初始点

i = 0;

intervalId = setInterval("printHeart()", time);

}

//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)

function printHeart () {

radian += radianDecrement;

ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线

//arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");

i++;

ctx.stroke();//画线

if (i >= num) {

clearInterval(intervalId);

//document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。

}

function getX (t) {//由弧度得到 X 坐标

return 100 + r * (16 * Math.pow(Math.sin(t), 3));

}

function getY (t) {//由弧度得到 Y 坐标

return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

}

2018-12-03by SKILLNULL JavaScript 阅读(7525)评论(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	31