首页html圣诞树代码动态带人名

html圣诞树代码动态带人名

时间: 2024-12-24 10:14:27 浏览: 7

HTML中创建动态圣诞树并显示个性化的人名通常需要结合CSS和JavaScript。下面是一个简单的例子，展示如何使用HTML、CSS以及一些基本的JavaScript来实现： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .tree { width: 400px; height: 400px; position: relative; background-color: #f5f5f5; } .triangle { position: absolute; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 140px solid green; } .name { position: absolute; bottom: 50px; left: 85px; font-size: 24px; } .person-name { content: attr(data-name); } </style> </head> <body> <div class="tree" data-name="张三"> <div class="triangle"></div> </div> <script> var tree = document.querySelector('.tree'); tree.addEventListener('click', function() { this.style.borderColor = 'red'; // 更改颜色 tree.dataset.name = prompt('请输入人的名字'); // 弹窗获取名字 tree.querySelector('.person-name').textContent = tree.dataset.name; // 更新名字文本 }); </script> </body> </html> ``` 这个代码示例中，当你点击圣诞树时，会弹出输入框让你输入人名。输入后，人名会动态显示在树下。你可以将`data-name`属性和`.person-name`选择器里的`content: attr(data-name);`替换为你实际的需求。

阅读全文