随机显示星星(点击可删除)【转】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>随机显示星星</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <style type="text/css"></style>
  <script type="text/javascript">
  //实例：随机显示小星星
  /*
    (1)网页加载完成，背景颜色为黑色
    (2)创建图片节点，并追加到body父节点下
    (3)定时器
    (4)星星随机大小
    (5)星星随机定位
    (6)单机星星，星星消失
  */
  window.onload=function(){
        document.body.bgColor="#000";
        //定时器开关
        window.setInterval("start2()",1000);
  }
  function start2(){
    //创建图片节点
    var imgObj=document.createElement("img");
    //追加到body节点
    document.body.appendChild(imgObj);
    //添加属性
    imgObj.setAttribute("src","xingxing.gif");
    //添加width属性
    var imgWidth=getRandom(15,85);
    imgObj.setAttribute("width",imgWidth);
    //添加style属性
    //clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
    //window.innerWidth取得浏览器的定宽 火狐支持
    //ie浏览器支持document.documentElement.clientX
    //如果"window.innerWidth"有值则执行前面的window.innerWidth(火狐支持);否则执行document.documentElement.clientWidth(ie浏览器兼容);
    /*
            if(window.innerWidth){
                    window.innerWidth
            }else{
                    document.documentElement.clientWidth;
                }
    */
    var winWidth=window.innerWidth  ? window.innerWidth : document.documentElement.clientWidth;
    var winHeight=window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
    //求随机数（出现的坐标）
    var x=getRandom(0,winWidth);
    var y=getRandom(0,winHeight);
    imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px");
        //单击删除星星
        imgObj.setAttribute("onclick","removeImg(this)");
     }

     function removeImg(imgObj){
        document.body.removeChild(imgObj);
     }
  function getRandom(min,max){
        var random=Math.random()*(max-min)+min;
        //向下取整
        random=Math.floor(random);
       //返回值
       return random;
  }

  </script>
 </head>

 <body>

 </body>
</html>转载自：http://www.cnblogs.com/yangzailu/p/6090164.html

时间： 2024-10-07 06:30:46

随机显示星星(点击可删除)【转】的相关文章

JS实现的随机显示图片

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8&q

jquery实现的随机显示图片效果代码

jquery实现的随机显示图片效果代码:下面介绍一下,点击按钮就可以实现图片的随机切换效果,代码实现非常的简单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <tit

一,效果图. 二,工程图. 三,代码. RootViewController.h RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [email protected]"背景颜色的随机显示"; } //点击任何处,变换背景颜色 -(void)touchesBegan:(NSSet *)touches withE

重写listview，横向滑动出现删除按钮，点击按钮删除item

首先看一下效果图: 接下来看具体操作: 准备一个删除按钮的布局,新建button.xml文件,代码如下所示: <?xml version="1.0" encoding="utf-8"?> <Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/btn" android:layout_width=&q

菜品原价为0,说明菜品没有原价.菜品原价大于0,则显示菜品原价.并以删除线删去.每个菜品都是直接取的数据库字段.

菜品原价为0,说明菜品没有原价.菜品原价大于0,则显示菜品原价.并以删除线删去.每个菜品都是直接取的数据库字段. 1 <script type="text/javascript"> 2 function deletelinedisplay() { 3 var str_s = document.getElementById("DataList1").getElementsByTagName("s").length; 4 for (var

ListView item中按钮点击实现删除

ListView item中按钮点击实现删除在处理ListView 中item的按钮点击事件首先需要在item的根布局中添加 android:descendantFocusability="blocksDescendants"属性,否则item的点击事件会把其中image button的点击事件屏蔽掉 item的布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

背景颜色的随机显示

直接上代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.title=@"背景颜色的随机显示"; CGFloat red = (CGFloat)arc4random() / 0x100000000; CGFloat green = (CGFloat)arc4random() / 0x100000000; CGFloat blue =

随机显示广告图片

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>随机显示广告图片</title> </head> <body> <script> advertisement = new Array(4); advertisement[0] = '<img src="

如是使用JS实现页面内容随机显示

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: <div id="p1"> <p>联系人:张三</p> <