javascript动态,javascript动态网页
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
如何通过javascript动态添加标签?
可以直接用document.getElementById("divid").innerHTML
=
"p内容/p";的方式来写。
多个可以循环进行处理。
假设段落文本是个数组:array。
可以通过for
(var
i
=
0;
i
array.length;i++)
{document.getElementById("divid").innerHTML
=
"p"+array[i]+"/p";}的方式进行处理。
延展:
如果段落过多,直接使用
div.appendChild方法会不段刷新DIV对象,影响运行速度。
正确的方法应该使用
document对象的碎片方法。
document.createDocumentFragment
容器,最后再将这些碎片返回给DIV对象比较合理,例如:
var
strArrayList=[];
//
创建一个段落文本数组对象,这些段落文本可能是100个也可能是1000个。
strArrayList[0]='数据111.......';
strArrayList[1]='数据.......';
strArrayList[2]='数据.......';
strArrayList[3]='数据.......';
strArrayList[4]='数据.......';
//...数据n.....
var
div=document.getElementById('div1');
//获得DIV对象。
var
f=document.createDocumentFragment();
//创建碎片对象。
for(var
i=0;istrArrayList.length;i++){
var
p=document.createElement('P');
//动态创建P标签。
p.appendChild(document.createTextNode(strArrayList[i]));//段落字符串。
f.appendChild(p);
//附加到碎片对象中。
}
div.appendChild(f);//最后返给DIV对象。
javascript 动态脚本添加的简单方法
异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程
1.createScript方法用于创建一个script标签并添加到body标签中
2.createModule方法用于创建一个script脚本的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行script.text兼容IE添加js的脚本内容。
button
id="demo"js文件/button
button
id="demo1"js模块/button
script
type="text/javascript"
//异步加载文件,支持所有浏览器
document.getElementById("demo").onclick
=
function
()
{
createScript("../../js/jquery-1.8.3.min.js");
}
function
createScript(url)
{
var
script
=
document.createElement("script");
script.type
=
"text/javascript";
script.src
=
url;
document.body.appendChild(script);
}
//这里首先会尝试标准的DOM方法,因为除了IE(在IE中会抛出错误),所有浏览器都支持这种方法,如果抛出错误则说明是IE,于是就必须使用tezt属性了
document.getElementById("demo1").onclick
=
function
()
{
createModule("function
sayHi(){alert('Hi
!')}");
}
function
createModule(code)
{
var
script
=
document.createElement("script");
script.type
=
"text/javascript";
try
{
script.appendChild(document.createTextNode(code));
}
catch
(ex)
{
script.text(code);
}
document.body.appendChild(script);
}
/script
以上就是小编为大家带来的javascript
动态脚本添加的简单方法全部内容了,希望大家多多支持脚本之家~
当前名称:javascript动态,javascript动态网页
本文地址:http://ybzwz.com/article/dsddsig.html