javascript基础题目

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/933915/blog/309492

文章标签：

#javascript #python #ViewUI

本文演示了如何使用HTML创建基本的网页结构，并通过JavaScript实现简单的动态效果，包括遮罩（mask）与参数获取（map）功能。

2019独角兽企业重金招聘Python工程师标准>>>

1、实现mask：

<!-- lang: html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- lang: html -->
<html lang="ru">
<!-- lang: html -->
<head>
<!-- lang: html -->
  <title></title>
<!-- lang: html -->
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- lang: html -->
</head>
<!-- lang: html -->
<body>
<!-- lang: html -->
  
<!-- lang: html -->
<div style="width:960px;margin:0 auto;" >
<!-- lang: html -->
  <div id='box'  style="position:relative;">
<!-- lang: html -->

<!-- lang: html -->
  <img src="http://gi4.md.alicdn.com/bao/uploaded/i4/TB1AnXXFVXXXXaDXVXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg"/> </div>
<!-- lang: html -->

<!-- lang: html -->
</div>
<!-- lang: html -->

<!-- lang: html -->

<!-- lang: html -->
<script type="text/javascript">
<!-- lang: html -->

<!-- lang: html -->
function  mask(id){
<!-- lang: html -->
 
<!-- lang: html -->
var m=  document.createElement('DIV');
<!-- lang: html -->
m.style.cssText="opacity: 0.5;position:absolute;width:500px;height:430px;border:1px solid red;top:0;left:0;background:#000"
<!-- lang: html -->
m.innerHTML="xxx";
<!-- lang: html -->
document.getElementById(id).appendChild(m);   
<!-- lang: html -->

<!-- lang: html -->

<!-- lang: html -->
}
<!-- lang: html -->

<!-- lang: html -->

<!-- lang: html -->
</script>
<!-- lang: html -->

<!-- lang: html -->
<button onclick="mask('box')"> mask </button>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>

虽然都是很基础的语法，但是应用的还是很巧妙的。

2、实现map:

<!-- lang: html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- lang: html -->
<html>
<!-- lang: html -->
<head>
<!-- lang: html -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- lang: html -->
<title>Insert title here</title>
<!-- lang: html -->

<!-- lang: html -->
</head>
<!-- lang: html -->
<body>
<!-- lang: html -->
<script type="text/javascript">
<!-- lang: html -->
function getParam(url){
<!-- lang: html -->
	var pos=url.indexOf('?');
<!-- lang: html -->

<!-- lang: html -->

<!-- lang: html -->
	var qs=url.substring(pos+1);
<!-- lang: html -->

<!-- lang: html -->

<!-- lang: html -->
	var pair=qs.split("&");
<!-- lang: html -->
	
<!-- lang: html -->
	var params={};
<!-- lang: html -->
	for(var i=0;i<pair.length;i++){
<!-- lang: html -->
	    
<!-- lang: html -->
	    var fields=pair[i].split('=');
<!-- lang: html -->
	    
<!-- lang: html -->
	    params[fields[0]]=fields[1];
<!-- lang: html -->
	    
<!-- lang: html -->
	    
<!-- lang: html -->
	}
<!-- lang: html -->

<!-- lang: html -->
	return params;
<!-- lang: html -->
}
<!-- lang: html -->

<!-- lang: html -->
	var test = new getParam("http:\//item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e");
<!-- lang: html -->
</script>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>

转载于:https://my.oschina.net/u/933915/blog/309492