shangrila-xiu

112
文章
101
分类
33
标签

js_paomadeng

JavaScript

script元素得属性如下：

language=”…” 指定script的类型

src=”uri” 指定script的相对地址和绝对地址

type=”content-type” 指定script的mime类型

noscript元素是用来针对不支持script的浏览器指定显示内容的

1
2
3
<noscript>
	<p>您的浏览器不支持script</p>
</noscript>

跑马灯效果的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin:0;
 padding:0;
 list-style: none;
 }
 div{
 position: relative;
 width: 800px;
 height: 200px;
 border: 5px solid lightgreen;
 margin:10px auto;
 overflow: hidden;
 }
 div ul{
 position: absolute;
 left:0;
 top:0;
 }
 div ul li{
 width: 200px;
 height: 200px;
 float: left;
 }
 div ul li img{
 width:100%;
 height: 100%;
 }
 </style>
</head>
<body>
<div id="div1">
 <ul>
 <li><img src="img/list0.jpg" alt=""/></li>
 <li><img src="img/list1.jpg" alt=""/></li>
 <li><img src="img/list0.jpg" alt=""/></li>
 <li><img src="img/list1.jpg" alt=""/></li>
 
 </ul>
</div>
<script>
 var oUl=document.getElementsByTagName('ul')[0];
 var lis=oUl.getElementsByTagName('li');
 oUl.innerHTML+=oUl.innerHTML;
 oUl.style.width=lis.length*lis[0].offsetWidth+'px';
 var left=null;
 var timer=setInterval(function(){
 left-=3;
 if(left<-oUl.offsetWidth/2){
 left=0;
 }
 oUl.style.left=left+'px'
 },10)
</script>
</body>
</html>

嵌入VBScript

在网页上具有提示效果的文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script language="VBScript">
			sub showans(tips)
			document.all(tips).style.visibility=show;
			end sub
			
			sub hideans(tips)
				document.all(tips).style.visibility="hidden";
			end sub 
			
		</script>
		<noscript>
	<p>您的浏览器不支持script</p>
</noscript>
		<p onmousemove="showans('ans_1')" onmouseout="hideans('ans_1')">饮食男女</p>
		<p onmousemove="showans('ans_2')" onmouseout="hideans('ans_2')">卧虎藏龙</p>
		<p onmousemove="showans('ans_3')" onmouseout="hideans('ans_3')">色戒</p>
		<p id="ans_1" style="position: absolute;left: 100px;top: 15px;visibility: hidden;color: red;">导演李安经典作品</p>
		<p id="ans_2" style="position: absolute;left: 100px;top: 60px;visibility: hidden;color: green;">导演李安武侠巨献</p>
		<p id="ans_3" style="position: absolute;left: 100px;top: 100px;visibility: hidden;color: blue;">导演李安问鼎威尼斯影展力作</p>
		
	</body>
</html>
原谅我，用谷歌打开啥也没有看到吧
下面用js改造的，就可以看到了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script language="JavaScript">
			function showans(tips){
				document.all(tips).style.visibility="visible";
			}
			
			
			
			function hideans(tips){
				document.all(tips).style.visibility="hidden";
			}
				
		</script>
		<noscript>
	<p>您的浏览器不支持script</p>
</noscript>
		<p onmousemove="showans('ans_1')" onmouseout="hideans('ans_1')">饮食男女</p>
		<p onmousemove="showans('ans_2')" onmouseout="hideans('ans_2')">卧虎藏龙</p>
		<p onmousemove="showans('ans_3')" onmouseout="hideans('ans_3')">色戒</p>
		<p id="ans_1" style="position: absolute;left: 100px;top: 15px;visibility: hidden;color: red;">导演李安经典作品</p>
		<p id="ans_2" style="position: absolute;left: 100px;top: 60px;visibility: hidden;color: green;">导演李安武侠巨献</p>
		<p id="ans_3" style="position: absolute;left: 100px;top: 100px;visibility: hidden;color: blue;">导演李安问鼎威尼斯影展力作</p>
		
	</body>
</html>

嵌入css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1{
				font-family: "标楷体";
				font-size:15px ;
				color:blue;
			}
		</style>
	</head>
	<body>
		<h1>欢迎光临！</h1>
	</body>
</html>

网页的自动导向（但是必须写在head中）

1
2
3
4
<!--只需要加上下面这句话即可-->
<head>
  <meta http-equiv="refresh" content="5;url=http://www.baidu.com"><!--url的这个可以不写-->
</head>