html 要求写一个会随机出现星星并在点击后消失的页面,但是现在出现的效果都是并排按顺序的,求大神指点

html 要求写一个会随机出现星星并在点击后消失的页面,但是现在出现的效果都是并排按顺序的,求大神指点,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

//定义全局变量

var img_width_min = 15

var img_width_max = 80

var x_left = 0

var x_right = 0

var y_top = 0

var y_bottom = 0

//定义初始化的函数

function init()

{

document.body.bgColor = "#000"

x_right = window.innerWidth - img_width_max

y_bottom = window.innerHeight - img_width_max

//定时器

setInterval("showStar()",1000)

}

//显示星星

function showStar()

{

//创建一个图片

var node_img = document.createElement("img")

//随机图片大小和随机坐标

var width = getRandom(img_width_min,img_width_max)

var x = getRandom(x_left,x_right)

var y = getRandom(y_top,y_bottom)

//增加src的属性

node_img.setAttribute("src","images/xingxing.gif")

//增加style属性

var style = "position:absoluteleft:"+x+"pxtop:"+y+"px"

style += "width:"+width+"px"

node_img.setAttribute("style",style)

//增加一个onclick事件属性

node_img.setAttribute("onclick","removeImg(this)")

//将图片追加到<body>元素下

document.body.appendChild(node_img)

}

function removeImg(obj)

{

document.body.removeChild(obj)

}

function getRandom(min,max)

{

return Math.floor(Math.random()*(max-min)+min)

}

</script>

</head>

<body onload="init()">

</body>

</html>

这个由浏览器默认设定,不同的浏览器不一样,有的浏览器是黑色圆点,有的浏览器是星号,不可以修改。除非你自己用代码实现这样的功能,没有说哪个属性或样式一设置就可以这么简单。

自己实现可以用js的replace或者用html5的placeholder之类的东西来实现。思路是将用户输入的东西复制到另外一个隐藏元素中。同时修改可见的输入框的内容。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6240831.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存