我的JavaScript回顾之路_04—0209—jsDom绑定点击事件/ js计算器/bootstrap框架

1、jsDom绑定点击事件onClick="btnClick(this)（注意该事件中原生jsdom上传参用指针this）

<button class="btn" onClick="btnClick(this)">button按钮</button>
<script>
console.log(document.querySelector(".btn"))
function btnClick(btn){

   btn.innerText = 1234;

console.log(btn)

}

</script>

获取dom的文本内容btn.innerText（与jq  .text()相同）

console.log(document.querySelectorAll("#dom"))//H5新增方法  可找到多个id相同的dom元素

2、计算器

键盘监听事件：document.onkeyup = function(event){

    console.log(event.key)//输出按下键盘对应的键

}

<div class='jsq'>
		<input id="result"></input>
		<button onClick="resultClick(this)">=</button>
		<span class="result"></span>
		<br>
		<button onClick="numberClick(this)" class="button">1</button>
		<button onClick="numberClick(this)" class="button">2</button>
		<button onClick="numberClick(this)" class="button">3</button>
		<button onClick="numberClick(this)" class="button">4</button>
		<button onClick="numberClick(this)" class="button">5</button>
		<br>
		<button onClick="numberClick(this)" class="button">6</button>
		<button onClick="numberClick(this)" class="button">7</button>
		<button onClick="numberClick(this)" class="button">8</button>
		<button onClick="numberClick(this)" class="button">9</button>
		<button onClick="numberClick(this)" class="button">0</button>
		<br>
		<button onClick="fClick(this)">+</button>
		<button onClick="fClick(this)">-</button>
		<button onClick="fClick(this)">*</button>
		<button onClick="fClick(this)">/</button>
		<button onClick="fClick(this)">%</button>
		<br>
	</div>

var showString = '';//input框内输入的加减乘除求余运算
		var numString = '';//输入的数字字符串
		var saveArr = [];
		var input = document.querySelector("#result");
		function numberClick(btn){
			addString(btn, 'num');
		}
		function fClick(btn){
			addString(btn, 'f');
		}
		function resultClick(btn){
			saveArr.push(numString * 1);
			numString = '';
			console.log(saveArr)
			for(let i = 0; i < saveArr.length; i++)
			{
				if(saveArr[i] == '*'){
					count('*', i);
					i = -1;//更新数组长度
				}else if(saveArr[i] == '/'){
					count('/', i);
					i = -1;
				}else if(saveArr[i] == '%'){
					count('%', i);
					i = -1;
				}
			}
			for(let i = 0; i < saveArr.length; i++)
			{
				if(saveArr[i] == '+'){
					count('+', i);
					i = -1;
				}else if(saveArr[i] == '-'){
					count('-', i);
					i = -1;
				}
			}
			var result = document.querySelector(".result");
			result.innerText = saveArr[0];
			showString = saveArr[0];
			input.value = showString;
			numString = saveArr[0];
			saveArr = [];
			console.log(saveArr);
		}
		function count(f, i){
			switch(f){
				case "*": saveArr[i - 1] = saveArr[i - 1] * saveArr[i + 1];
				break;
				case "/": saveArr[i - 1] = saveArr[i - 1] / saveArr[i + 1];
				break;
				case "%": saveArr[i - 1] = saveArr[i - 1] % saveArr[i + 1];
				break;
				case "+": saveArr[i - 1] = saveArr[i - 1] + saveArr[i + 1];
				break;
				case "-": saveArr[i - 1] = saveArr[i - 1] - saveArr[i + 1];
				break;
				default:
				break;
			}
			saveArr.splice(i, 2);//移除运算后多余的两个下标
		}
		function addString(btn, type){
			if(type == 'f'){
				saveArr.push(numString * 1);
				numString = '';
				saveArr.push(btn.innerText);
			}else{
				numString += btn.innerText;
			}
			showString += btn.innerText;
			input.value = showString;
		}
		document.onkeyup = function(event){
			if(event.key == '='){
				resultClick();
			}
			else if(event.key >= 0 && event.key <= 9)
			{
				showString += event.key;
				numString += event.key;
			}
		}

3、bootstrap框架：流媒体

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

.col-xs-

                                        xs手机           sm平板     md中等屏幕    lg大屏幕

                                        <768px           >=768px   >992px     >=1200px

.container 最大宽度	None （自动）	750px	970px	1170px

显示或者隐藏  .hidden-sm      .visible-md   清除浮动   clearfix   可用a元素做button按钮

bootstrap4.0与3.0的不同

1.响应式 meta 标签   确保在所有设备上能够正确渲染并支持触控缩放<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2.less sass   使用rem和em单位   支持选择弹性盒模型（flexbox）

bootstrap可视化布局系统模版：www.bootcss.com/p/layoutit