您的位置:

网页js动态设计(jsp动态网页设计)

网页js动态设计(jsp动态网页设计)

更新:

本文目录一览:

通过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

网页js动态设计(jsp动态网页设计)

本文目录一览: 1、通过js动态创建标签,并设置属性方法 2、用JS设计一个页面,在页面上显示信息"现在是XXXX年XX月XX日XX点XX分XX秒(星期X),欢迎您到访我的站点". 3、javascr

2023-12-08
网页动态js,网页动态交互效果设计

本文目录一览: 1、怎么爬取网页的动态内容,很多都是js动态生 2、网页的动态JS在哪找? 3、如何在html页面动态加载js文件 怎么爬取网页的动态内容,很多都是js动态生 抓取动态页面有两种常用的

2023-12-08
jsp动态页面课程设计设计报告(静态网页课程设计报告)

本文目录一览: 1、jsp的课程设计有哪些 2、你有JSP课程设计报告?可以复制份给我吗,我们有这个作业 3、JSP课程设计 4、JSP页面列表动态表的实现 5、给一个JSP 课程设计吧~ 谢谢急用,

2023-12-08
js动态编程实例,js动态网页设计实例

本文目录一览: 1、JS编程是什么意思? 2、JS动态规划——青蛙跳台阶问题 3、用HTML+JavaScript编程,实现如下功能 4、怎样在hbuilder中用javascript写一个动态留言

2023-12-08
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
jsp动态网页制作技术,JSP动态网页技术

本文目录一览: 1、在jsp中如何制作动态网页 2、servlet可以实现动态网页的开发,为什么还需要jsp技术? 3、JSP课程的心得总结 4、制作一个简易JSP动态网页 在jsp中如何制作动态网页

2023-12-08
在jsp网页中如何动态设置图片,在jsp网页中如何动态设置图

2022-11-23
ee的动态网页技术jsp,动态网页技术有

本文目录一览: 1、JSP就是JAVAscript吗? 2、jsp和javaEE有什么区别 3、jsp是什么 4、jsp是什么? 5、java EE的三大组建技术都是什么? JSP就是JAVAscri

2023-12-08
php和jsp三大动态网页技术,用php和html写动态网页

2022-11-19
动态网页的php实现技术,php动态网站实例

2022-11-19
应用jsp开发动态web页面,jsp动态网页开发技术

本文目录一览: 1、JSP技术主要缺点和优点有哪些? 2、JSP技术主要缺点和优点有哪些 3、jsp的环境配置与简单jsp页面测试 4、servlet可以实现动态网页的开发,为什么还需要jsp技术?

2023-12-08
jsp动态网页开发技术是什么(jsp动态网页开发技术是什么意

本文目录一览: 1、解释JSP的作用,并列举JSP的特点 2、JSP是什么 3、什么叫JSP技术 4、什么是jsp动态网页 5、jsp是什么 解释JSP的作用,并列举JSP的特点 JSP是一种建立在S

2023-12-08
js网页程序设计(网页设计程序语言)

本文目录一览: 1、用JS设计一个页面,在页面上显示信息"现在是XXXX年XX月XX日XX点XX分XX秒(星期X),欢迎您到访我的站点". 2、网页编程,如何用js创建一个按钮 3、javascrip

2023-12-08
动态js,动态js文件

2022-11-24
动态网页设计php实验报告,动态网页设计php实验报告怎么写

2022-11-27
jsp网站数据库设计,jsp网页设计

本文目录一览: 1、JSP制作网站的时候,不知道要怎么设计数据库。 2、用JSP做QQ空间的数据库怎么设计? 3、用jsp设计网页的时候如何跟后台数据库相连 4、jsp 网页数据库 5、基于JSP开发

2023-12-08
java动态创建网页,java 动态创建类

2022-11-23
js网页动效库,js网页动态效果

本文目录一览: 1、前端 | 利用particles.js实现粒子动效 2、如何用Paper.js制作网页动画 3、js怎么实现动态progress 4、javascript如何实现动态效果 前端 |

2023-12-08
js动态加载网页,js 动态网页

2022-11-24
jsp动态网页静态化,jsp动态网页特性

2022-11-24