报名小程序怎么制作_js完成漫天星星效果

2021-01-12 14:57 admin
js实现漫天星星效果       这篇文章主要为大家详细介绍了js点击出漫天的小星星,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下

效果图:

实现代码:

 html 
 head 
 title new document /title 
 meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / 
 script type="text/javascript" 
 //点出漫天小星星
 //背景色
 //给html添加onclick事件
 //创建图片节点,并追加到body父节点下
 //图片的随机大小
 function init(e){
 //创建图片节点(在内存中,还看不见)
 var imgObj=document.createElement("img");
 //追加节点
 document.body.appendChild(imgObj);
 //添加属性
 imgObj.src="xingxing.gif";
 //添加width属性
 imgObj.width=getRandom(15,85);
 //定位
 var x=e.clientX e.clientX : event.clientX;
 var y=e.clientY e.clientY : event.clientY;
 imgObj.style.position="absolute";
 imgObj.style.left=x - imgObj.width/2+"px";
 imgObj.style.top=y- imgObj.width/2+"px";
 function getRandom(min,max){
 return Math.floor(Math.random()*(max-min)+min);
 /script 
 /head 
 body 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。