js我是精明的小卖家（二）

于 2019-09-06 13:08:08 发布
阅读量168 收藏
点赞数
分类专栏： js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45358338/article/details/100563174
版权 
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<title>faf</title>
<meta charset="utf-8">
<style>
	thead tr{
		text-align: center;
		color: #FF7F50;
		background-color: 	#006400;
	}
	.div4 {
		position: relative;
		width: 100%;
		height: 80px;

	}
	.span1 {		
		position: absolute;
		left: 0;
		bottom: 0;
		text-align: center;
		width: 0;
		height: 0;
		border-left: 0 solid transparent;
		border-right: 150.29px solid transparent;
		border-bottom: 80px solid 	#90EE90;
	}
	.span2 {
		position: absolute;
		right: 0;
		top: 0;
		text-align: center;
		width: 0;
		height: 0;
		border-top: 80px solid 	#F08080;
		border-right: 0 solid transparent;
		border-left: 150.29px solid transparent; 
	}
	.span1 p{
		width: 80px;
		position: absolute;
		left: 0;
		bottom: -80px;
	}
	.span2 p{
		width: 80px;
		position: absolute;
		right: 0;
		top: -80px;
	}
	.num0, .num3, .num6 {
		background-color: #708090;
	}
	.num1, .num4, .num7 {
		background-color: #c0d9f3;
	}
	.num2, .num5, .num8 {
		background-color: #e1e9f1;
	}
</style>
</head>
<body>

<script>
 let sourceData = [{
            product: "手机",
            region: "华东",
            sale: [120, 100, 140, 160, 180, 185, 190, 210, 230, 245, 255, 270]
        }, {
            product: "手机",
            region: "华北",
            sale: [80, 70, 90, 110, 130, 145, 150, 160, 170, 185, 190, 200]
        }, {
            product: "手机",
            region: "华南",
            sale: [220, 200, 240, 250, 260, 270, 280, 295, 310, 335, 355, 380]
        }, {
            product: "笔记本",
            region: "华东",
            sale: [50, 60, 80, 110, 30, 20, 70, 30, 420, 30, 20, 20]
        }, {
            product: "笔记本",
            region: "华北",
            sale: [30, 35, 50, 70, 20, 15, 30, 50, 710, 130, 20, 20]
        }, {
            product: "笔记本",
            region: "华南",
            sale: [80, 120, 130, 140, 70, 75, 120, 90, 550, 120, 110, 100]
        }, {
            product: "智能音箱",
            region: "华东",
            sale: [10, 30, 4, 5, 6, 5, 4, 5, 6, 5, 5, 25]
        }, {
            product: "智能音箱",
            region: "华北",
            sale: [15, 50, 15, 15, 12, 11, 11, 12, 12, 14, 12, 40]
        }, {
            product: "智能音箱",
            region: "华南",
            sale: [10, 40, 10, 6, 5, 6, 8, 6, 6, 6, 7, 26]
        }];

	var div1 = document.createElement('div');
	var div2 = document.createElement('div');
	var form1 = document.createElement('form');
	var form2 = document.createElement('form');
	var arr1 = ['华东', '华北', '华南', '全选'];
	var arr2 = ['智能音箱', '笔记本', '手机', '全选'];
	for (var i = 0; i < 4; i++) {
		var label1 = document.createElement('label');
		var label2 = document.createElement('label');
		var input1 = document.createElement('input');
		var input2 = document.createElement('input');
		input1.setAttribute('type', 'checkbox');
		input2.setAttribute('type', 'checkbox');
		input1.setAttribute('name', 'input');		
		input2.setAttribute('name', 'input');
		for (var j = 0; j < 4; j++) {
			if (i == j) {
				var text1 = document.createTextNode(arr1[j]);
				var text2 = document.createTextNode(arr2[j]);
				input1.setAttribute('class', 'inp_1');
				input1.setAttribute('value', arr1[j]);
				input2.setAttribute('class', 'inp_2')
				input2.setAttribute('value', arr2[j])
			}	
		}
		label1.appendChild(input1);
		label2.appendChild(input2);
		label1.appendChild(text1);
		label2.appendChild(text2);
		form1.appendChild(label1);
		form2.appendChild(label2);
		div1.appendChild(form1);
		div2.appendChild(form2);
	}
	document.body.appendChild(div1);
	document.body.appendChild(div2);
	var div5 = document.createElement('div');
	div5.setAttribute('style', 'width:900px');
	document.body.appendChild(div5);
	
		table();
		addData();	
	

	form1.addEventListener('click', s);
	form2.addEventListener('click', s);
	function s(e) {
		var e = e || window.event;
		var target = e.target || window.srcElement;
		if (target.nodeName.toLowerCase() == 'input' || target.nodeName.toLowerCase() == 'lable') {
			var tr = document.querySelectorAll('tbody tr');
			var inp = document.querySelectorAll('input');
			if (inp[0].checked == false && inp[1].checked == false && inp[2].checked == false && inp[0].checked == false && inp[0].checked == false && inp[4].checked == false && inp[5].checked == false && inp[6].checked == false) {
				target.checked = true
			}		
			if (target.value !== '全选') {
				if (inp[0].checked == true && inp[1].checked == true && inp[2].checked == true) {
					inp[3].checked = true;
				}else {
					inp[3].checked = false;
				}
				if (inp[4].checked == true && inp[5].checked == true && inp[6].checked == true) {
					inp[7].checked = true;
				}else {
					inp[7].checked = false;
				}
			}else if (target.value == '全选') {
				if (inp[3].checked == true && target.className == 'inp_1') {
					for (var i = 0; i < 3; i++) {
						inp[i].checked = true;
					}
				}else if (inp[3].checked == false && target.className == 'inp_1' && (inp[4].checked == true || inp[5].checked == true || inp[6].checked == true)) {
					for (var i = 0; i < 3; i++) {
						inp[i].checked = false;
					}
				}
				if (inp[7].checked == true && target.className == 'inp_2') {
					for (var i = 0; i < 3; i++) {
						inp[i+4].checked = true;
					}
				}else if (inp[7].checked == false && target.className == 'inp_2' && (inp[0].checked == true || inp[1].checked == true || inp[2].checked == true)) {
					for (var i = 0; i < 3; i++) {
						inp[i+4].checked = false;
					}
				}
			}
			for (var i = 0; i < 9; i++) {
				tr[i+1].style.visibility = 'visible';
			}
			if (target.className == 'inp_1') {
				for (var i = 0; i < 3; i++) {
					for (var j = i+1; j < 10; j =j + 3) {
						if (inp[i].checked !== true) {
							tr[j].style.visibility = 'hidden';
						}
						if (inp[i+4].checked !== true) {
							for (var z = i*3+1; z < i*3+4; z++) {
								tr[z].style.visibility = 'hidden';
							}
						}
					}
				}
			}else if (target.className == 'inp_2') {
				for (var i = 0; i < 3; i++) {
					for (var j = i*3+1; j < i*3+4; j++) {
						if (inp[i+4].checked !== true) {
							tr[j].style.visibility = 'hidden';
						}
						if (inp[i].checked !== true) {
							for (var z = i+1; z < 10; z =z + 3) {
								tr[z].style.visibility = 'hidden';
							}
						}
					}
				}
			}
		}
	}

	function table() {
		var div3 = document.createElement('div');
		document.body.insertBefore(div3, div5);
		var tab = document.createElement('table');
		tab.setAttribute('border', '1');
		div3.appendChild(tab);
		var thead = document.createElement('thead');
		tab.appendChild(thead);
		var tr = document.createElement('tr');
		thead.appendChild(tr); 
		var th = document.createElement('th');
		tr.appendChild(th);
		th.setAttribute('colspan', '13')
		th.innerHTML = '我是精明的小卖家';
		var tbody = document.createElement('tbody');
		tab.appendChild(tbody);
		for (var i = 0; i < 10; i++) {
			var trb = document.createElement('tr');
			for (var j = 0; j < 13; j++) {
				var th = document.createElement('th');
				trb.appendChild(th);
			}
			tbody.appendChild(trb);
		}
		var arr = ['智能音箱（华东）', '智能音箱（华北）', '智能音箱（华南）', '笔记本（华东）', '笔记本（华北）', '笔记本（华南）', '手机(华东)', '手机(华北)', '手机(华南)'];
		for (var i = 0; i < 9; i++) {
			tbody.children[i+1].firstChild.innerHTML = arr[i];
			tbody.children[i+1].firstChild.style.minWidth = '150px';
			var c = 'num' + i;
			tbody.children[i+1].setAttribute('class', c);
		}
		for (var i = 0; i < 12; i++) {
			tbody.children[0].children[i+1].innerHTML = i+1;
			tbody.children[0].children[i+1].style.minWidth = '20px';
			tbody.children[0].children[i+1].style.backgroundColor = '#6B8E23';
		}
		var tr = document.querySelectorAll('tbody tr')
		for (var i = 0; i < 9; i++) {
			for (var j = 0; j < 12; j++) {
				var td = document.createElement('td');
				tr[i+1].removeChild(tr[i+1].children[tr[i+1].children.length-j-1])
				tr[i+1].appendChild(td)
			}
		}
		var div4 = document.createElement('div');
		div4.setAttribute('class', 'div4');
		var span1 = document.createElement('span');
		span1.setAttribute('class', 'span1');
		var span2 = document.createElement('span');
		span2.setAttribute('class', 'span2');
		var p1 = document.createElement('p');
		var p2 = document.createElement('p');
		p1.innerHTML = '商品';
		p2.innerHTML = '月份';
		span1.appendChild(p1);
		span2.appendChild(p2);
		div4.appendChild(span1);
		div4.appendChild(span2);
		tbody.children[0].children[0].style.width = '150px';
		tbody.children[0].children[0].appendChild(div4);
		return tbody;
	}	

	function value() {
		var phone = [];
		var computer = [];
		var sound = [];
		var len = sourceData.length;
		for (var i = 0; i < len; i++) {
			if (sourceData[i].region == '华东') {
				if (sourceData[i].product == '手机') {
					phone.push(sourceData[i].sale);
				}else if (sourceData[i].product == '笔记本') {
					computer.push(sourceData[i].sale);
				}else {
					sound.push(sourceData[i].sale);
				}
			} 
			if (sourceData[i].region == '华南') {
				if (sourceData[i].product == '手机') {
					phone.push(sourceData[i].sale);
				}else if (sourceData[i].product == '笔记本') {
					computer.push(sourceData[i].sale);
				}else {
					sound.push(sourceData[i].sale);
				}
			}
			if (sourceData[i].region == '华北') {
				if (sourceData[i].product == '手机') {
					phone.push(sourceData[i].sale);
				}else if (sourceData[i].product == '笔记本') {
					computer.push(sourceData[i].sale);
				}else {
					sound.push(sourceData[i].sale);
				}
			}
		}
		var arr = [];
		arr = arr.concat(sound.concat(computer.concat(phone)));
		return arr;
	}

	function addData() {
		var data = value();
		var t = document.querySelector('tbody');
		for (var i = 0; i < 9; i++) {
			for (var j = 0; j < 12; j++) {
					t.children[i+1].children[j+1].innerHTML = data[i][j]
			}
		}
	}

	function remove() {
		var element = document.querySelector('canvas');
		var element2 = document.querySelector('svg');
		if (element) {
			element.parentNode.removeChild(element);
		}	
		if (element2) {
			element2.parentNode.removeChild(element2);
		}
	}

	var tbody = document.querySelector('tbody');
	tbody.onmouseover = function() {
		remove();
		var tr = document.querySelectorAll('tbody tr');
		var e = e||window.event;
		var target = e.target||window.srcElement;
		for (var i = 0; i < 9; i++) {
			if (target.parentNode.className == tr[i+1].className) {
				canvas(i);
				svg(i)
			}
		}
	}
		
	function svg(n) {
		var arr = value();
		var maxData = 0;	
		for (var j = 0; j < 12; j++) {				
			if (maxData < arr[n][j]) {
				maxData = arr[n][j];
			}
		}
		var s = maxData + 40 +'px';
		var ss = maxData + 20;
		var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svg.setAttribute('id', 'svg');
		svg.setAttribute('width', '450px');
		svg.setAttribute('height', s);
		document.body.appendChild(svg);
		var polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
		polyline.setAttribute('points', "17,15 20,9 23,15 20,9 20,"+ ss+' 411,'+ ss+' 405,'+(ss-3)+' 411,'+ ss+' 405,'+(ss+3));
		polyline.setAttribute('style', 'fill:transparent;stroke:black;stroke-width:2');
		svg.appendChild(polyline);
		for (var i = 0; i < 12; i++) {
			var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
			rect.setAttribute('x', 30*(i+1));
			rect.setAttribute('y', ss-arr[n][i]);
			rect.setAttribute('width', '20');
			rect.setAttribute('height', arr[n][i]);
			rect.setAttribute('style', 'stroke:green;stroke-width:1;fill:green;');
			svg.appendChild(rect);
			div5.appendChild(svg);
		}
	}

	function canvas(n){
		var arr = value();
		var maxData = 0;
			for (var j = 0; j < 12; j++) {				
				if (maxData < arr[n][j]) {
					maxData = arr[n][j];
				}
			}
		var s = maxData+ 40+'px';
		var ss = maxData + 20;
		var canvas = document.createElement('canvas');
		canvas.setAttribute('width', '450px');
		canvas.setAttribute('height', s);
		div5.appendChild(canvas);
		var c = canvas.getContext('2d');
		c.beginPath();
		c.strokeStyle = '#000000';
		c.moveTo(17, 15);
		c.lineTo(20, 9);
		c.lineTo(23, 15);
		c.lineTo(20, 9);
		c.lineTo(20, ss);
		c.lineTo(411, ss);
		c.lineTo(405, ss-3);
		c.lineTo(411, ss);
		c.lineTo(405, ss+3);
		c.stroke();
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('月份', 390, ss+20);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('销', 4, 30);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('量', 4, 45);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('︵', 4,60);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('部', 4, 70);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('︶', 4, 80);
		for (var i = 0; i < 12; i++) {
			c.strokeStyle= 'red';
			c.beginPath();
			c.arc(30*i+40, ss-arr[n][i], 5, 0, 2*Math.PI);
			c.stroke();
			c.beginPath();
			c.strokeStyle= 'green';
			c.moveTo(30*i+40, ss-arr[n][i]);
			c.lineTo(30*i+70, ss-arr[n][i+1]);
			c.stroke();
			c.beginPath();
			c.strokeStyle='black';
			c.font='10px Arial';
			c.fillText(arr[n][i], 30*i+30, ss-10-arr[n][i]);
			c.beginPath();
			c.strokeStyle='black';
			c.font='10px Arial';
			c.fillText(i+1, 30*i+30, ss+20);
		}
	}
	
	tbody.onmouseout = function() {
		remove();
		var arr = value();
		var maxData = 0;
		for (var i = 0; i < 9; i++) {
			for (var j = 0; j < 12; j++) {				
				if (maxData < arr[i][j]) {
					maxData = arr[i][j];
				}
			}
		}
		var s = maxData+ 40+'px';
		var ss = maxData + 20;
		var canvas = document.createElement('canvas');
		canvas.setAttribute('width', '450px');
		canvas.setAttribute('height', s);
		div5.appendChild(canvas);
		var c = canvas.getContext('2d');
		c.beginPath();
		c.strokeStyle = '#000000';
		c.moveTo(17, 15);
		c.lineTo(20, 9);
		c.lineTo(23, 15);
		c.lineTo(20, 9);
		c.lineTo(20, ss);
		c.lineTo(411, ss);
		c.lineTo(405, ss-3);
		c.lineTo(411, ss);
		c.lineTo(405, ss+3);
		c.stroke();
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('月份', 390, ss+20);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('销', 4, 30);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('量', 4, 45);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('︵', 4,60);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('部', 4, 70);
		c.beginPath();
		c.font = '10px Arial';
		c.fillText('︶', 4, 80);
		var tr = document.querySelectorAll('tbody tr');
		for (var n = 0; n < 9; n++) {
			if (tr[n+1].style.visibility == 'visible') {
				(function newCanvas() {
					for (var i = 0; i < 12; i++) {
						c.strokeStyle= 'red';
						c.beginPath();
						c.arc(30*i+40, ss-arr[n][i], 5, 0, 2*Math.PI);
						c.stroke();
						c.beginPath();
						c.strokeStyle= 'green';
						c.moveTo(30*i+40, ss-arr[n][i]);
						c.lineTo(30*i+70, ss-arr[n][i+1]);
						c.stroke();
						c.beginPath();
						c.strokeStyle='black';
						c.font='10px Arial';
						c.fillText(arr[n][i], 30*i+30, ss-10-arr[n][i]);
						c.beginPath();
						c.strokeStyle='black';
						c.font='10px Arial';
						c.fillText(i+1, 30*i+30, ss+20);
					}
				})(c);
			}
		}
	}
</script>
</body>
</html>
流浪的宇滴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值