ホームページ > ウェブフロントエンド > jsチュートリアル > JS に基づいた DOM および BOM プログラミング

JS に基づいた DOM および BOM プログラミング

零到壹度
リリース: 2018-03-23 09:48:19
オリジナル
1653 人が閲覧しました


この記事では、主に JS の基本的な DOM および BOM プログラミングについて、主にコードの形式で説明します。これが皆様のお役に立てれば幸いです。


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/**

 * @author Administrator

 */

//通过js创建年,月,日

//获取Dom

var dom = window.document;

function myYear() {

//获取年的select

var year = dom.getElementById("year");

//创建年

var minYear = 1900;

var maxYear = new Date().getFullYear();

for (var i = minYear; i <= maxYear; i++) {

//创建Option

var opt = dom.createElement("option");

//设置Option,标签体.

opt.innerHTML = i;

opt.value = i;

//挂载节点

year.appendChild(opt);

}

}

function myMonth() {

var month = dom.getElementById("month");

//创建月

for (var i = 1; i <= 12; i++) {

//创建Option

var opt = dom.createElement("option");

//设置Option,标签体.

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = i;

} else {

opt.innerHTML = i;

opt.value = i;

}

month.appendChild(opt);

}

month.onchange = myDay;

}

function myDay() {

clear();

//创建天

// 大月1 3 5 7 8 10 12 ,小月4 6 9 11    闰年2月 非闰年的2月

//获取年

var year = dom.getElementById("year").value;

//获取月

var month = dom.getElementById("month").value;

if (year == "") {

alert("请选择年");

return;

}

if (month == "") {

alert("请选择月");

return;

}

//获取天select

var day = dom.getElementById("day");

//一个月至少有28天.

for (var i = 1; i <= 28; i++) {

var opt = dom.createElement("option");

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = "0" + i;

} else {

opt.innerHTML = i;

opt.value = i;

}

day.appendChild(opt);

}

//大月

var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;

//小月

var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;

//闰年    可以整除4但不能整除100 或者 年份可以整除400.

var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;

//判断,如果是大月,添加3天

if (isBigMonth) {

//添加3天

for (var i = 29; i <= 31; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} else if (isSmallMonth) {

//添加2天

for (var i = 29; i <= 30; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} else if (isLeapYear) {

//如果是闰年,添加一天.专门处理闰年2月.

var opt = dom.createElement("option");

opt.innerHTML = 29;

opt.value = 29;

day.appendChild(opt);

}

}

function clear() {

var day = dom.getElementById("day");

var optArr = day.childNodes;

for (var i = optArr.length - 1; i >= 0; i--) {

day.removeChild(optArr[i]);

}

}

function getBirthday() {

//获取Dom

var dom = window.document;

myYear();

myMonth();

}

getBirthday();

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>javascript</title>

</head>

<body>

生日:

<select id="year">

<option>年</option>

</select>

<select id="month">

<option>月</option>

</select>

<select id="day">

<option>日</option>

</select>

</body>

</html>

ログイン後にコピー

関連推奨事項:

Javascript BOM と DOM の説明

JavaScriptの基本 BOM&&DOM

JS DOMの学習

のBOM

以上がJS に基づいた DOM および BOM プログラミングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート