網頁js動態設計（jsp動態網頁設計）

本文目錄一覽：

• 1、通過js動態創建標籤,並設置屬性方法
• 2、用JS設計一個頁面,在頁面上顯示信息”現在是XXXX年XX月XX日XX點XX分XX秒(星期X),歡迎您到訪我的站點”.
• 3、javascript如何實現動態效果

通過js動態創建標籤,並設置屬性方法

當我們在寫jsp頁面時，往往會遇到這種情況：從後台獲取的數據個數不確定，此時在前端寫jsp頁面時也就不確定怎麼設計了。這個時候就需要通過js動態創建標籤：

1.創建某個標籤：如下在body中創建一個div的事例；

script

function

fun(){

var

frameDiv

=

document.createElement(“div”);//創建一個標籤

var

bodyFa

=

document.getElementById(“bodyid”);//通過id號獲取frameDiv

的父類（也就是上一級的節點）

bodyFa

.appendChild(frameDiv);//把創建的節點frameDiv

添加到父類body

中；

}

script

body

id=”bodyid”

!–在此添加div標籤–

/body

2.添加屬性：給創建的標籤添加相應的屬性：

frameDiv

.setAttribute(“id”,

“divid”);//給創建的div設置id值；

frameDiv

.className=”divclass”;

//給創建的div設置class；

//給某個標籤添加顯示的值；

var

h

=

document.createElement(“h1”);

h.innerHTML

=

data[i].name;

var

p

=

document.createElement(“p”);

p.innerHTML

=

“要顯示的值”;

3.創建的標籤添加事件：

a.不帶參數：

frameDiv.onmousedown

=

fun;//ps：函數名fun後面一定不能帶括號，否則會在創建標籤的時候執行函數，

而不是鼠標按下時執行；

b.有參數：

frameDiv.onmousedown

=

function(){

fun(this);

}

c.要調用的函數；

function

fun(){

alert(“鼠標按下”);

}

4.如果擔心創建的標籤沒有被覆蓋則可以替換：

var

divFlag

=

document.getElementById(“divFlag”);

var

divMain

=

document.createElement(“div”);

if(divFlag

!=

null){

body.replaceChild(divMain,

divFlag);//把原來的替換掉

}

divMain.setAttribute(“id”,

“divFlag”);

以上這篇通過js動態創建標籤,並設置屬性方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:JS實現給對象動態添加屬性的方法JS中動態創建元素的三種方法總結(推薦)js動態創建標籤示例代碼使用變量動態設置js的屬性名

用JS設計一個頁面,在頁面上顯示信息”現在是XXXX年XX月XX日XX點XX分XX秒(星期X),歡迎您到訪我的站點”.

script

//setTimeout

var info = “現在是”+date.getFullYear()+”年”;

info += (date.getMonth()+1)+”月”;

info += (date.getDate())+”日”;

info += date.getHours() + “點”;

info += date.getMinutes()+”分”;

info += date.getSeconds()+”秒”;

info += “（星期”+(date.getDay()+1)+”）”;

/script

運行模式

JavaScript是一種屬於網絡的高級腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

是一種解釋性腳本語言（代碼不進行預編譯）。

主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。

可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。

javascript如何實現動態效果

JS動態效果，參考如下：

!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″

title浮動圖片/title

script type=”text/javascript”

var step = 1; // 移動的像素

var y = -1; // 垂直移動的方向，-1表示向上，1表示向下

var x = 1; // 水平移動的方向，-1表示向左，1表示向右

function myFloat()

{

var img = document.getElementById(“myImg”);

// 獲取圖片和當前瀏覽器窗口上邊距，由於img.style.top獲取的值帶px單位

var top = img.style.top.replace(“px”, “”);

// top = top – 100;

// img.style.top = top + “px”;

// 獲取圖片和當前瀏覽器窗口左邊距

var left = img.style.left.replace(“px”, “”);

// left = left – 100;

// img.style.left = left + “px”;

// 上下移動

if(top = 0)

{

y = 1;

}

if(top = document.body.clientHeight)

{

y = -1;

}

top = (top*1) + (step * y);

img.style.top = top + “px”;

// 左右移動

if(left = 0)

{

x = 1;

}

// alert(img.clientWidth);

if(left = (document.body.clientWidth – img.clientWidth))

{

x = -1;

}

left = (left*1) + (step * x);

img.style.left = left + “px”;

setTimeout(“myFloat()”, 20);

}

/script

/head

body onload=”myFloat();” style=”height: 400px;”

img id=”myImg” src=”IP.gif”

style=”position: absolute; left: 500px; top: 400px; border: solid 1px black;” /

/body

/html