javascript_综合应用（1）

最新推荐文章于 2022-04-18 17:04:22 发布
最新推荐文章于 2022-04-18 17:04:22 发布
阅读量232 收藏 1
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42595216/article/details/101604090
版权

参考内容：妙味课堂

<style>
#div1{ width:180px; height:180px; overflow:hidden; position:relative;}
#div1 span{ width:100px; height:100px; background:yellow; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var oSpan = oDiv.getElementsByTagName('span')[0];
	
	oDiv.onmouseover = function(){
		oSpan.style.display = 'block';
	};
	
	oDiv.onmouseout = function(){
		oSpan.style.display = 'none';
	};
	
	oDiv.onmousemove = function(ev){
		var ev = ev || window.event;
		//让oSpan相对鼠标向左上角偏移oSpan的一半
		oSpan.style.left = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth/2 + 'px';
		oSpan.style.top = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight/2 + 'px';
		
	};
	
};
</script>
<body>
<div id="div1">
	<img src="b2.jpg">
    <span></span>
</div>
</body>
//不处理下面所述问题，低版本IE浏览器将会出现子级元素闪烁状态，效果不好
//测试  子级影响父级
<style>
#div1{ width:200px; height:200px; background:red;}
#div2{ width:100px; height:100px; background:yellow;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	/*
        onmouseover,momouseout存在的问题是，当鼠标进入子级元素时，会触发离开父级和再次进入父级
        事件；当鼠标离开子级元素时，会再次触发离开父级及进入父级事件。
        */
	oDiv.onmouseover = function(){
		console.log('1') ;
	};
	
	oDiv.onmouseout = function(){
		console.log ('2');
	};
	
};
</script>
<body>
<div id="div1">
	<div id="div2"></div>
</div>
</body>
//--------------------------------------------------------
//解决方案:
/*1.js :  onmouseenter onmouseleave ( 子级不会影响到父级 )
最早 ie  firefox  chrome  , 做兼容非常的麻烦 */

window.onload = function(){
	var oDiv = document.getElementById('div1');
	
	oDiv.onmouseenter = function(){
		console.log('1');
	};
	
	oDiv.onmouseleave = function(){
		console.log('2');
	};
	
};
//兼容IE
window.onload = function(){
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	
	oDiv1.onmouseover = function(ev){
		var ev = ev || window.event;
		var a = this, b = ev.relatedTarget;
		
		//console.log(a.innerHTML);
		//console.log(b.innerHTML);		
		if( !elContains(a,b) && a!=b ){			
			document.title += '1';			
		}
	};
	
	oDiv1.onmouseout = function(ev){		
		var ev = ev || window.event;
		var a = this, b = ev.relatedTarget;
		
		if(!elContains(a,b) && a!=b){
			document.title += '2';			
		}
	};
};

function elContains(a, b){  //判断两个元素是否是嵌套关系	
	return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);	
}

//2.css  加一个层
<style>
#div1{ width:180px; height:180px; overflow:hidden; position:relative;}
#div1 span{ width:100px; height:100px; background:yellow; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none;}
#mark{ width:180px; height:180px; background:red; position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
#div2{ width:500px; height:500px; position:absolute; left:250px; top:50px; overflow:hidden;}
#div2 img{ position:absolute; left:0; top:0;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var oSpan = oDiv.getElementsByTagName('span')[0];	
	var oDiv2 = document.getElementById('div2');
	var img2 = oDiv2.getElementsByTagName('img')[0];
	
	oDiv.onmouseover = function(){
		oSpan.style.display = 'block';
	};
	
	oDiv.onmouseout = function(){
		oSpan.style.display = 'none';
	};
	
	oDiv.onmousemove = function(ev){
		var ev = ev || window.event;		
		var L = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth/2;
		var T = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight/2;		
		if(L<0){
			L = 0;
		}
		else if(L>oDiv.offsetWidth - oSpan.offsetWidth){
			L = oDiv.offsetWidth - oSpan.offsetWidth;
		}		
		if(T<0){
			T = 0;
		}
		else if(T>oDiv.offsetHeight - oSpan.offsetHeight){
			T = oDiv.offsetHeight - oSpan.offsetHeight;
		}		
		oSpan.style.left = L + 'px';
		oSpan.style.top = T + 'px';
		
		var scaleX = L/(oDiv.offsetWidth - oSpan.offsetWidth);
		var scaleY = T/(oDiv.offsetHeight - oSpan.offsetHeight);
		
		img2.style.left = - scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + 'px';
		img2.style.top = - scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + 'px';				
	};	
};
</script>
<body>
<div id="div1">
	<img src="b2.jpg">
    <span></span>
    <div id="mark"></div>
</div>
<div id="div2">
	<img src="b1.jpg">
</div>
</body>
//苹果菜单
<style>
*{ margin:0; padding:0;}
#div1{ width:100%; height:auto; position:absolute; bottom:0; text-align:center;}
#div1 img{ width:64px;}
</style>
<script>
window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oDiv = document.getElementById('div1');
	var aImg = oDiv.getElementsByTagName('img');
	
	for(var i=0;i<aImg.length;i++){
		var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
		var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
		
		aInput[i].value = 'X轴:'+x+',Y轴:' + y;		
	}	
};
</script>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
	<img src="images/1.png">
    <img src="images/2.png">
    <img src="images/3.png">
    <img src="images/4.png">
    <img src="images/5.png">
</div>
</body>
//-------------------------------------------------------------------
<script>
window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oDiv = document.getElementById('div1');
	var aImg = oDiv.getElementsByTagName('img');
	
	document.onmousemove = function(ev){		
		var ev = ev || window.event;		
		for(var i=0;i<aImg.length;i++){
			var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
			var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
		
			var a = ev.clientX - x;
			var b = ev.clientY - y;			
			var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
			
			var scale  = 1 - c/300;
			
			if(scale < 0.5){
				scale = 0.5;
			}			
			aInput[i].value = scale;		
			aImg[i].style.width = scale * 128 + 'px';
			aImg[i].style.height = scale * 128 + 'px';			
		}		
	};	
};
</script>

//照片墙
//实现照片的拖拽
<style>
*{ margin:0; padding:0;}
#ul1{ width:660px; position:relative; margin:10px auto;}
li{ width:200px; height:150px; margin:10px; float:left; list-style:none;}
</style>
<script>
window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var izIndex = 2;
	var arr = [];
	
	for(var i=0;i<aLi.length;i++){
		arr.push( [ aLi[i].offsetLeft , aLi[i].offsetTop ] );
	}
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.position = 'absolute';
		aLi[i].style.left = arr[i][0] + 'px';
		aLi[i].style.top = arr[i][1] + 'px';
		aLi[i].style.margin = 0;
	}
	
	for(var i=0;i<aLi.length;i++){
		drag(aLi[i]);
	}
	
	function drag(obj){
		var disX = 0;
		var disY = 0;
		obj.onmousedown = function(ev){
			
			obj.style.zIndex = izIndex++;
			
			var ev = ev || window.event;
			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove = function(ev){
				var ev = ev || window.event;
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
			};
			
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};			
			return false;			
		};
	}	
};
</script>
<ul id="ul1">
	<li><img src="photo/1.jpg" /></li>
    <li><img src="photo/2.jpg" /></li>
    <li><img src="photo/3.jpg" /></li>
    <li><img src="photo/4.jpg" /></li>
    <li><img src="photo/5.jpg" /></li>
    <li><img src="photo/1.jpg" /></li>
    <li><img src="photo/2.jpg" /></li>
    <li><img src="photo/3.jpg" /></li>
    <li><img src="photo/4.jpg" /></li>
</ul>
//--------------------------------------------------
//移动后，找出与移动照片重叠的其它照片
<script>
window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var izIndex = 2;
	var arr = [];
	
	for(var i=0;i<aLi.length;i++){
		arr.push( [ aLi[i].offsetLeft , aLi[i].offsetTop ] );
	}
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.position = 'absolute';
		aLi[i].style.left = arr[i][0] + 'px';
		aLi[i].style.top = arr[i][1] + 'px';
		aLi[i].style.margin = 0;
	}
	
	for(var i=0;i<aLi.length;i++){
		drag(aLi[i]);
	}
	
	function drag(obj){
		var disX = 0;
		var disY = 0;
		obj.onmousedown = function(ev){
			
			obj.style.zIndex = izIndex++;
			
			var ev = ev || window.event;
			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove = function(ev){
				var ev = ev || window.event;
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
				
				for(var i=0;i<aLi.length;i++){
					if( pz(obj,aLi[i]) && obj!=aLi[i] ){
						aLi[i].style.border = '2px red solid';
					}
					else{
						aLi[i].style.border = '';
					}
				}
				
			};
			
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};
			
			return false;
			
		};
	}
	//判断是否重叠
	function pz(obj1,obj2){
		var L1 = obj1.offsetLeft;
		var R1 = obj1.offsetLeft + obj1.offsetWidth;
		var T1 = obj1.offsetTop;
		var B1 = obj1.offsetTop + obj1.offsetHeight;
		
		var L2 = obj2.offsetLeft;
		var R2 = obj2.offsetLeft + obj2.offsetWidth;
		var T2 = obj2.offsetTop;
		var B2 = obj2.offsetTop + obj2.offsetHeight;
		
		if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
			return false;
		}
		else{
			return true;
		}		
	}	
};
</script>
//--------------------------------------------------------------
//找出距离最近且相交的那张照片
<script>
window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var izIndex = 2;
	var arr = [];
	
	for(var i=0;i<aLi.length;i++){
		arr.push( [ aLi[i].offsetLeft , aLi[i].offsetTop ] );
	}
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.position = 'absolute';
		aLi[i].style.left = arr[i][0] + 'px';
		aLi[i].style.top = arr[i][1] + 'px';
		aLi[i].style.margin = 0;
	}
	
	for(var i=0;i<aLi.length;i++){
		drag(aLi[i]);
	}
	
	function drag(obj){
		var disX = 0;
		var disY = 0;
		obj.onmousedown = function(ev){
			
			obj.style.zIndex = izIndex++;
			
			var ev = ev || window.event;
			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove = function(ev){
				var ev = ev || window.event;
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
				
				for(var i=0;i<aLi.length;i++){
					aLi[i].style.border = '';
				}
				
				var nL = nearLi(obj);
				
				if(nL){
					nL.style.border = '2px red solid';
				}				
			};
			
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};			
			return false;			
		};
	}
	//判断距离最近的两张照片
	function nearLi(obj){		
		var value = 9999;
		var index = -1;	
		for(var i=0;i<aLi.length;i++){
			if( pz(obj,aLi[i]) && obj!=aLi[i] ){				
				var c = jl(obj,aLi[i]);				
				if( c < value ){
					value = c;
					index = i;
				}				
			}
		}		
		if(index != -1){
			return aLi[index];
		}
		else{
			return false;
		}		
	}
	//求两照片间的距离
	function jl(obj1,obj2){		
		var a = obj1.offsetLeft - obj2.offsetLeft;
		var b = obj1.offsetTop - obj2.offsetTop;
		
		return Math.sqrt(a*a + b*b);	
	}
	
	
	function pz(obj1,obj2){
		var L1 = obj1.offsetLeft;
		var R1 = obj1.offsetLeft + obj1.offsetWidth;
		var T1 = obj1.offsetTop;
		var B1 = obj1.offsetTop + obj1.offsetHeight;
		
		var L2 = obj2.offsetLeft;
		var R2 = obj2.offsetLeft + obj2.offsetWidth;
		var T2 = obj2.offsetTop;
		var B2 = obj2.offsetTop + obj2.offsetHeight;
		
		if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
			return false;
		}
		else{
			return true;
		}		
	}	
};
</script>
//----------------------------------------------------------------
//定义移动函数move.js
// JavaScript Document
//前往目的地的动作函数
function startMove(obj,json,endFn){	
		clearInterval(obj.timer);		
		obj.timer = setInterval(function(){			
		var bBtn = true;		
		for(var attr in json){
			//声明当前变量此时所处的状态属性，通过getStyle()获取属性值
			var iCur = 0;
		
			if(attr == 'opacity'){
				if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
					/*过滤掉Math.round(parseFloat(getStyle(obj,attr))*100)=0的情况，不然的话，
					iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100恒等于100
					而不会出现iCur=0的情况。
					*/
				iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
				
				}
				else{
					iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
				}	
			}
			else{
				iCur = parseInt(getStyle(obj,attr)) || 0;
			}
			
			//定义变化，移动速度
			var iSpeed = (json[attr] - iCur)/8;
		iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			if(iCur!=json[attr]){
				//类似开关，json[attr]为目标值
				bBtn = false;
			}
			
			if(attr == 'opacity'){
				obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
				obj.style.opacity = (iCur + iSpeed)/100;				
			}
			else{
				obj.style[attr] = iCur + iSpeed + 'px';
			}					
		}
		
		if(bBtn){
			clearInterval(obj.timer);
			
			if(endFn){
				endFn.call(obj);
			}
		}		
	},30);	
}
	
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}
	else{
		return getComputedStyle(obj,false)[attr];
	}
}
//--------------------------------------------------------------------
<script src="move.js"></script>
<script>
window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var izIndex = 2;
	var arr = [];
	
	for(var i=0;i<aLi.length;i++){
		arr.push( [ aLi[i].offsetLeft , aLi[i].offsetTop ] );
	}
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.position = 'absolute';
		aLi[i].style.left = arr[i][0] + 'px';
		aLi[i].style.top = arr[i][1] + 'px';
		aLi[i].style.margin = 0;
	}
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].index = i;
		drag(aLi[i]);
	}
	
	function drag(obj){
		var disX = 0;
		var disY = 0;
		obj.onmousedown = function(ev){
			
			obj.style.zIndex = izIndex++;
			
			var ev = ev || window.event;
			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove = function(ev){
				var ev = ev || window.event;
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
				
				for(var i=0;i<aLi.length;i++){
					aLi[i].style.border = '';
				}
				
				var nL = nearLi(obj);
				
				if(nL){
					nL.style.border = '2px red solid';
				}
				
			};
			
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
				
				var nL = nearLi(obj);
				var tmp = 0;
				
				if(nL){
					startMove( nL , { left : arr[obj.index][0] , top : arr[obj.index][1] } );
					startMove( obj , { left : arr[nL.index][0] , top : arr[nL.index][1] } );
					nL.style.border = '';
					
					tmp = obj.index;
					obj.index = nL.index;
					nL.index = tmp;
				}
				else{
					startMove( obj , { left : arr[obj.index][0] , top : arr[obj.index][1] } );
				}				
			};			
			return false;			
		};
	}
	
	function nearLi(obj){
		
		var value = 9999;
		var index = -1;
		
		for(var i=0;i<aLi.length;i++){
			if( pz(obj,aLi[i]) && obj!=aLi[i] ){
				
				var c = jl(obj,aLi[i]);
				
				if( c < value ){
					value = c;
					index = i;
				}				
			}
		}
		
		if(index != -1){
			return aLi[index];
		}
		else{
			return false;
		}		
	}
	
	function jl(obj1,obj2){
		
		var a = obj1.offsetLeft - obj2.offsetLeft;
		var b = obj1.offsetTop - obj2.offsetTop;
		
		return Math.sqrt(a*a + b*b);		
	}
	
	
	function pz(obj1,obj2){
		var L1 = obj1.offsetLeft;
		var R1 = obj1.offsetLeft + obj1.offsetWidth;
		var T1 = obj1.offsetTop;
		var B1 = obj1.offsetTop + obj1.offsetHeight;
		
		var L2 = obj2.offsetLeft;
		var R2 = obj2.offsetLeft + obj2.offsetWidth;
		var T2 = obj2.offsetTop;
		var B2 = obj2.offsetTop + obj2.offsetHeight;
		
		if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
			return false;
		}
		else{
			return true;
		}		
	}	
};
</script>
//----------------------------------------------------------------
//随机移动
oInput.onclick = function(){
		
		var randomArr = [0,1,2,3,4,5,6,7,8];
		
		randomArr.sort(function(n1,n2){
			return Math.random() - 0.5;
		});
		
		for(var i=0;i<aLi.length;i++){
			startMove( aLi[i] , { left : arr[randomArr[i]][0] , top : arr[randomArr[i]][1] } );
			
			aLi[i].index = randomArr[i];
			
		}
		
	};

 

星宇非凡
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之------综合应用
Discovering,Thinking and Finding——This Is My Logic
07-13 1843
DHTML技术使用的基本思路： 1. 用标签封装数据---html范畴 2. 定义样式---css范畴 3. 明确事件源、事件和要处理的节点---dom范畴 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴 一、列表菜单 1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项) DHT
JavaScript之 ------ 综合应用
寻找、发现、追求、获得———这就是狼的生活要素
10-24 3149
一、列表菜单 二、快捷设置文本字体 三、对表格的一些操作（创建，删除，设置颜色，排序等） 四、选择框的应用（类似如邮件管理） 五、正则表达式的应用（用户注册） 六、下拉框的应用（设置字体颜色、两个下拉框的对应）
Javascript综合应用小案例
weixin_34032827的博客
05-04 180
按需求弄了一个 取词 以及 标红 的小应用。 先上demo ：http://qianduannotes.sinaapp.com/getKeyword/ 很多平时常用的东西，都用上了，所以拿出来说说。   一、代码 var GetKeywords = { str: "", limit: 11, keywords:[], init : function(){ ...
JavaScript之DOM综合应用练习
Web小笨猪的博客
04-07 825
效果图： 实现代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt
js综合案例
q2211164的博客
04-18 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0 none;...
JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri
10-01
1. **JavaScript基础**：JavaScript语言的基础包括变量、数据类型、运算符、流程控制（条件语句、循环语句）、函数等。学习JavaScript首先要掌握这些基本语法，为后续的高级特性学习打下坚实基础。 2. **DOM操作**...
JavaScript_房地产应用程序使用MERN和顺风css.zip
05-20
总体而言，这个项目展示了如何综合运用JavaScript及其生态系统中的各种工具，构建一个功能齐全、用户友好的房地产应用程序。开发者通过学习和实践这个项目，可以提升全栈开发能力，理解前后端协作的流程，同时掌握...
jscn.rar_java chm_java script_javascript_javascript c_javascript
09-14
《JavaScript 语言参考》中文版(CHM)是一个关于JavaScript编程语言的综合参考资料，适用于初学者和有经验的开发者。此资源包含了一个CHM（Compiled Help Manual）文件，这是微软开发的一种帮助文档格式，通常用于...
jmos.rar_javascript_jmos win_webqq
09-21
1. `Web.config`：这是ASP.NET应用程序中的配置文件，虽然项目是JavaScript驱动的，但可能包含了服务器端的一些配置，如IIS（Internet Information Services）设置。 2. `index.htm`：通常是网页的入口文件，它可能...
MYSQL_FUNCTION.rar_javascript_mysql DB
09-23
1. `SpeedKoalaBD.exe.Config`：这可能是某个应用的配置文件，可能包含了数据库连接字符串或其他与数据库交互的设置。 2. `Resource.dat`：通常存储应用程序的资源数据，如本地化文本、图片等，可能包含JavaScript库...
javascript的ext综合应用,Ext js 资源大全
01-08
一个不用写javascript的ext综合应用-简易java框架和Ext js 资源大全。
复习前端基础知识7之JavaScript综合应用
weixin_46079817的博客
11-27 111
复习前端基础知识7之JavaScript综合应用 制作如上图所示的小购物车页面，这里需要经常用到我们之前复习过的盒子模型。 首先要利用页面布局的div布局把我们所需要的盒子画出来。 先做第一个店铺中的内容。 将一整个页面当作一个最大的div盒子里面嵌套小盒子 那么第一个店铺的店铺名称上面有一个稍大的盒子，里面有四个小盒子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
javascript综合应用（2）
星宇非凡
09-29 264
参考学习内容：妙味课堂 //购物车案例 //reset.css @charset "utf-8"; /* CSS Document */ /*html,body { user-select: none; -moz-user-select: none; -webkit-user-select: none; }*/ body, ul, ol, dl, dd, h1, h2, h3, h4, h5,...
Javascript语句综合运用
Banies_Li的博客
11-18 213
for循环的嵌套运用： //九九乘法表 for (var i = 1; i &lt; 10; i++) { for (var j = 1; j &lt; i+1; j++) { document.write( '&lt;span style="display: inline-block;width: 80px;height: 30px;"&gt;'+j...
JavaScript的综合应用案例
TrineaShao' Blog
01-05 1257
实现以上功能： 1、文字的填充、form表单数据 2、改变颜色、改变宽高、隐藏内容、显示内容、恢复 3、代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;style样式&lt;/title&am
Web综合应用实验（html css javascript）
半岛落枫的博客
11-15 4438
default_order function panduan(str){         if(str==""||str==null){             return 0;             }         else         return 1;     } function emailpanduan(str){      var l;      l
js,jq综合应用四个例子
牧野枫凉的博客
09-08 773
1.随机飘雪的网页特效经常在网站中见到，再配合音乐可以更好的营造温馨的氛围，效果如图: 该项目需要实现的功能主要包含如下几个方面： 1.通过代码来新增一片或多片雪花； 2.雪花新增的位置是随机的； 3.可以随时开始或暂停雪花移动； 4.可以删除部分或所有雪花； 5.雪花向下移动过程中还需要适时补充雪花，这样才能模拟下雪的效果； 6.当雪花移出整个屏幕区域后，不应该继续保留该雪花，应该及时将其删除，...
Js实现淘宝购物车类似功能(DOM综合应用)
热门推荐
Carrywill的博客
02-18 1万+
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 具体效果有：1.可以全选，全不选商品。2.选中的商品，点击下面“删除所选”按钮可以批量删除3.每个商品，可以在该商品信息栏最后的“删除”按钮删除该商品4.每个商品，可以在该商品信息栏增加或减少商品的数量，改变后该商品的小计价格及最后的商品总价自动发生变化。阅读提示：html是网上练习的模板，css部分也没有什么好说...
2022年40多份中国各行业、区域统计大集合(全新整理)
最新发布
08-30
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141308935 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 ## 数据指标说明 为了方便大家研究，我们收集了各类年鉴，做了一个合集，目前共有40多分2022年最新年鉴，后续将持续更新中~~~~
构建大型JavaScript应用：架构模式探索(1)
"大型JavaScript应用...总结，构建大型JavaScript应用程序需要综合运用设计模式、选择合适的框架，以及采用可扩展的架构。通过持续学习和实践，开发者可以更好地驾驭JavaScript的复杂性，构建出高效、可维护的应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值