<script>
window.onload=function () {
var Odiv=document.createElement("div")//创建一个div
var Ospan=document.createElement("span") //创建一个span
Odiv.style.cssText="width:200pxheight:200pxbackground:#636363
text-align:centerline-height:220px" //创建div的css样式
//Odiv.id="box" //创建div的id为box
//Odiv.className="Box" //div的class为Box
Odiv.appendChild(Ospan) //在div内创建一个span
document.body.appendChild(Odiv) //在body内创建一个div
}
</script>
<html><head>
<script type="text/javascript">
function btnClick()
{
var p=document.createElement("p")
var t=document.createTextNode("AAAAA")
p.appendChild(t)
document.body.appendChild(p)
}
</script>
</head>
<body>
<input type="button" onclick="btnClick()" value="单击添加元素">
</body>
</html>
方法：1、直接贴图：在界面上贴一个gif动态等待效果图片，gif图片获取方式：网上找素材，会ps的可以自己制作<img src="wait.gif" />
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：
这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制
下面提供一个CSS3绘制的范例
3、CSS的代码如下：
<style>
.loading {
width:0
height:0
border-right:20px solid #fff
border-top:20px solid #000
border-left:20px solid #fff
border-bottom:20px solid #000
border-radius: 20px
-moz-border-radius: 20px
-webkit-border-radius: 20px
}
.loading {
animation: bganim 0.6s linear 0s infinite
-moz-animation: bganim 0.6s linear 0s infinite
-webkit-animation: bganim 0.6s linear 0s infinite
}
@keyframes bganim {
from { transform:rotate(0deg)} to { transform:rotate(360deg)}
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}
}
</style>
4、<label>CSS3效果</label>，<div class="loading"></div>
效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现
5、使用js等待效果插件(如：spin.js)
6、JS代码如下：
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
}
var target = document.getElementById('img_wait')
var spinner = new Spinner(opts).spin(target)
7、html代码的引用：<div id="img_wait"></div>
8、打开测试，效果如下
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）