您的位置：首页 > Web前端 > JavaScript

js jq分割字符串并延时加载到页面元素

2016-01-05 20:24 706 查看
直接解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Lifushan`s</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<link rel = "shortcut icon" href = "indexstatic/icon.ico" />
<style type="text/css">
.zone{font-size:14px;float:left;max-width:200px;border:1px solid gray;margin:35px;padding:10px}
.pic{width:180px;}
.admin{color:black}
</style>

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
//do something

var h=$("#hided").text();
var arr=h.split('|');
$("#title").text(arr[0]);
$("#author").text(arr[1]);
$("#content").text(arr[2]);
//alert(h);

})

</script>
</head>
<body>
标题：<span id="title"> </span></br>
作者：<span id="author"> </span></br>
内容：<span id="content"> </span></br>

<div id="hided" style="display:none">你好|黎富山|今天很高兴！</div>

</body>
</html>


延时加载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Lifushan`s</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<link rel = "shortcut icon" href = "indexstatic/icon.ico" />
<style type="text/css">
.zone{font-size:14px;float:left;max-width:200px;border:1px solid gray;margin:35px;padding:10px}
.pic{width:180px;}
.admin{color:black}
</style>

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
//do something

//alert(h);
function showtime(){
var h=$("#hided").text();
var arr=h.split('|');
$("#title").text(arr[0]);
$("#author").text(arr[1]);
$("#content").text(arr[2]);
}
var test = setTimeout(function(){
showtime()
},2000);

})

</script>
</head>
<body>
标题：<span id="title"> </span></br>
作者：<span id="author"> </span></br>
内容：<span id="content"> </span></br>

<div id="hided" style="display:none">你好|黎富山|今天很高兴！</div>

</body>
</html>


二维字符串解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Lifushan`s</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<link rel = "shortcut icon" href = "indexstatic/icon.ico" />
<style type="text/css">
.zone{font-size:14px;float:left;max-width:200px;border:1px solid gray;margin:35px;padding:10px}
.pic{width:180px;}
.admin{color:black}
</style>

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
//do something

//alert(h);
function showtime(){
var h=$("#hided").text();
var arr=h.split('@');
var arr1=arr[0].split('|');
$("#title").text(arr1[0]);
$("#author").text(arr1[1]);
$("#content").text(arr1[2]);

var arr2=arr[1].split('|');
$("#title1").text(arr2[0]);
$("#author1").text(arr2[1]);
$("#content1").text(arr2[2]);
}
var test = setTimeout(function(){
showtime()
},2000);

})

</script>
</head>
<body>
标题：<span id="title"> </span></br>
作者：<span id="author"> </span></br>
内容：<span id="content"> </span></br></br></br>

标题：<span id="title1"> </span></br>
作者：<span id="author1"> </span></br>
内容：<span id="content1"> </span></br>

<div id="hided" style="display:none">你好|黎富山|今天很高兴！@你不好|黎科恩|今天很苦恼！</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航