21xrx.com
2025-03-21 10:08:31 Friday
文章检索 我的文章 写文章
实战:JavaScript和HTML结合的案例
2023-06-15 13:16:59 深夜i     11     0
JavaScript HTML 案例

JavaScript和HTML是前端开发中非常重要的两个技术,结合起来可以实现更加丰富、动态的页面效果和交互。本文将介绍一个基于JavaScript和HTML结合的实战案例。

案例说明:

在页面上添加一个点击按钮,每当用户点击该按钮时,页面上会出现一个随机颜色的圆形。基于JavaScript可以实现动态生成HTML元素,并为元素添加样式,因此我们可以通过JavaScript来操作页面元素,实现上述案例。

代码实现:

HTML代码:

添加圆形

JavaScript代码:

function addCircle() {
 var container = document.getElementById("container");
 var circle = document.createElement("div");
 circle.style.width = "100px";
 circle.style.height = "100px";
 circle.style.backgroundColor = getRandomColor();
 circle.style.borderRadius = "50%";
 container.appendChild(circle);
}
function getRandomColor() {
 var letters = "0123456789ABCDEF";
 var color = "#";
 for (var i = 0; i < 6; i++) {
  color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
}

  
  

评论区

请求出错了