怎样用html中的javascript编写一个圣诞树

JavaScript09

怎样用html中的javascript编写一个圣诞树,第1张

圣诞树啊,应该是考虑怎样画三角形吧,用border就可以了哈。

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

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.ss{

height: 0

width: 0

position: absolute

border: 20px solid tan

border-color: transparent transparent #1fd224 transparent

}

.s1{

border-width:80px

top: 100px

left: 400px

}

.s2{

border-width:100px

top: 115px

left: 382px

}

.s3{

border-width:120px

top: 126px

left: 362px

}

.s4{

border-width:140px

top: 140px

left: 342px

}

.dd{

height: 130px

width: 40px

position: absolute

top: 420px

left: 460px

background-color: #1fd224

}

</style>

</head>

<body>

<div class="s1 ss"></div>

<div class="s2 ss"></div>

<div class="s3 ss"></div>

<div class="s4 ss"></div>

<div class="dd">

</div>

</body>

</html>

看着有点丑,楼主可以改变宽度高度以及颜色哈。最后希望采纳哈

// 生成树结构

function tree(list) {

const result = []

for (let value of list) {

// 排除空字符串的情况

if (!value) {

continue

}

const values = value.split('/')

// 查找树结构的当前级别是否已经存在,不存在则创建对象,并添加入列表。

let current = result.find(item =>item.name === values[0])

if (current === void 0) {

current = {}

result.push(current)

}

for (let i = 0, length = values.lengthi <lengthi++) {

current.name = values[i]

if (i <length - 1) {

// 如果还有下一级内容,判断当前是否有 children,没有则构建.

if (current.children === void 0) {

current.children = []

}

// 查找下一级对象,为下一遍遍历构建对象

let nextCurrent = current.children.find(item =>item.name === values[i + 1])

if (nextCurrent === void 0) {

nextCurrent = {}

current.children.push(nextCurrent)

}

current = nextCurrent

}

}

}

return result

}

============ 假装分割线 ===========

以上代码是生成树的函数,调用 tree 函数并传入你的 input 数据,返回值就是生成的树。百科没找到传代码的地方了。