本文目录一览：
- 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
原创文章，作者：简单一点，如若转载，请注明出处：https://www.506064.com/n/128964.html
微信扫一扫 
支付宝扫一扫 