1. 程式人生 > >動態生成一個div塊並讓其移動

動態生成一個div塊並讓其移動

<html>
  <head>
    <title>增加div塊</title>
  </head>
    <script>
function chardiv(){
 var time;
  this.creater=function(){
    var a=document.createElement("mydiv");          //建立新的div塊
a.style.top=Math.random()*200;    
a.style.left=Math.random()*200;
a.style.position="absolute";  
a.style.width=35;            //新div塊的寬度

a.style.height=35;          //新div塊的高度
a.innerHTML="A";             
a.style.background="yellow";   //新div塊的背景顏色
mydiv.appendChild(a);
    this.move=function(){
 a.style.top=parseInt(a.style.top)+20;   //div塊移動
  if(parseInt(a.style.top)>370){          //如果移動到大於370px
    a.style.top=0;                        //返回離top=0px

  }   
}
  }
}
function stop(){
    clearInterval(time);        //清除定時器
  }
function gamestart(){
  var charA=new chardiv();          //new 一個例項charA
  charA.creater();
  charA.move();
  time=setInterval(function(){   
    charA.move();
  },500);
 }
</script>
    </head>
   <body>
     <button onclick="gamestart()">start</button>
<button onclick="stop()">stop</button>
<div id="mydiv" style="position:absolute;width:500;height:400;background:green;top:50"></div>
   </body>

</html> 

效果示意圖:


相關推薦

動態生成一個div移動

<html>   <head>     <title>增加div塊</title>   </head>     <script>function chardiv(){ var time;  this.c

checkbox全選或者單選的值動態生成div裏面

bsp .com oot containe height width checked ima doctype 效果如圖所示 <!DOCTYPE html><html> <head> <meta charse

那些方法在執行時動態生成一個java類

一:java compiler 可以對類進行編譯,生成位元組碼 也可以直接操作位元組碼。比如asm ,javasist ,cglib 二: 位元組碼和類載入怎麼無縫轉化的? 用到了,java 底層的 defineclass 方法,將java位元組碼 byte [] 進行載入。 動態代理也是位元組碼操

linux下的簡單程式設計——輸入一個字串,輸出個數

1、安裝虛擬機器(VMware12),安裝系統(Ubuntu14),安裝VMware Tools 2、為Ubuntu建立root使用者 3、在Ubuntu下安裝ssh服務,便於通過Xshell遠端訪問 4、通過cd /mnt/hgfs/shared/指令進入共享

在vue中利用vue-qr外掛動態生成二維碼嵌入LOGO

  收到需求要生成二維碼的時候剛進專案組不久,接觸vue也才一兩個星期,還處於懵逼狀態。   本小白的第一反應就是百度二維碼的生成方法,網上有很多大神給出解決方案,最開始本小白以為是在後臺生成圖片然後傳到前臺頁面,後來發現可以直接在前端用js生成,網上查到的大部分都是用jquery.qrcode.js配合u

Vue+Element動態生成新表單新增驗證

首先有一個這樣的需求,表單中預設有一個聯絡人資訊,使用者可以再新增新的聯絡人資訊 點選新增更多聯絡人之後 官方文件中有寫用v-for來實現新增表單,但是那是單表單的新增,現在多表單的新增,可以考慮的實現方法是先寫死一個必須的表單,需要新增的兩個表單放在一個div裡

動態生成一個textview,設定padding不起作用的解決辦法。

今天在動態寫佈局的時候,動態new了一個TextView,然後給其設定padding不起作用。 TextView tv = new TextView(mContext); LinearLayout.

Photoshop CS6將多張圖片合成GIF動態圖或視訊,儲存匯出

(0)從Mini Bridge中拖入多張圖片(製作原材料),形成多個圖層。 (1)從“視窗”中開啟“時間軸” 從“時間軸”的選項中“從圖層建立幀”,並設定各幀的延遲時間。可點選播放進行預覽。 (2)儲存為GIF格式檔案。 從“檔案”選擇“儲存為Web所用格式”,命名並“儲存”即可

js動態生成form表單提交

在提交json資料時,可能會出後臺無法解析資料的bug,碰到這個不要怕,在提交資料前用js轉一下json就好了,下面我寫的程式碼裡有轉json的程式碼,如果只是傳單個數據,就沒必要寫成json格式了。 $("#exceldown").click(function() {

動態生成html表單提交

之前在做一個問卷調查的時候,用到了動態生成html表單,個人感覺,html方式雖然原始,但它是萬能的解決方法。 生成頁查詢資料庫,然後得到泛型,用stringbuilder 生成html程式碼。  1 List<Model.Quest> wtlist =

24、有哪些方法可以在執行時動態生成一個Java類?

目錄 今天我要問你的問題是,有哪些方法可以在執行時動態生成一個 Java 類? 典型回答 考點分析 知識擴充套件 我們分析一下,動態程式碼生成是具體發生在什麼階段呢? 最後一個問題,位元組碼操縱技術,除了動態代理,還可以應用在什麼地方? 在開始今天的學習前,我建議你先

hibernate(jpa)根據實體動態生成查詢條件,實現分頁問題的解決方案

hibernate如何根據傳進去實體的不為空屬性生成動態查詢,並實現分頁,經過檢視hibernate api需要用到Criteria ,但是Criteria 有個缺點就是當另一個表A中某一外來鍵列是該表B的主鍵,如果A表中有兩條記錄對應B表的某一主鍵,則查詢結果中B表的該記錄

Java 動態生成類和例項, 注入方法

Java官方支援的, 必須要有接口才行 import java.lang.reflect.Constructor; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; i

C#也能動態生成Word文件填充資料, 匯出EXCEL 方法

        public string CreateWordFile(string CheckedInfo)         ...{             string message = "";             try             ...{                 Ob

JS動態生成表單,新增行雙擊事件

//獲取某一出庫型別某日期所有出庫單 累計金額列表function getOutSheetAmtList(){        var hosnum=$('#hosnum').val();    var sdate=$('#sdate').val();//記賬日期 始    var edate=$('#eda

C++工作筆記-Windows下查詢視窗控制代碼顯示在桌面

程式執行截圖如下:此處分2種情況,1.控制代碼處於最小化,2.控制代碼處於非最小化。程式碼如下:#include <windows.h> #include <iostream>

jQuery控制div層,使移動、改變位置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test2.html</title>

動態生成的option 插入select標籤的第一個,且預設選中

   html:         <select id="scene">             <option value="111">111</option>             <option value="222">

在VS裡建立Windows窗體,最小化在系統托盤,顯示一個Icon圖示

C#實現系統托盤,C#窗體最小化時隱藏為工作列圖示的Window appllication 1.設定窗體屬性showintask=false   2.加notifyicon控制元件notifyicon1,為控制元件notifyicon1的屬性icon新增一個icon圖示。

iframe設定錨點來解決重新整理時跳轉到其他頁面和點選動態生成的選單欄高亮的思路

我們在使用iframe時,一般是很多子頁面共用一個選單欄,然後點選不同選單切換到不同的子頁面,但是當你重新整理時可能會碰到跳轉到其他頁面的情況,這個時候就需要設定錨點來解決。 另外,我們還需要解決點選選單欄讓它處於高亮的選中狀態。並且在設定錨之後,還要處理如何