2019年7月7日

学习网站： http://www.w3school.com.cn/js/js_examples.asp

1.输出

1. 1首先就是输出看

<script>document.getElementById("demo").innerHTML = 5 + 6;</script>

1.2 弹窗输出

<script>window.alert(5 + 6);</script>

1.3 log 输出

需要用 F12出现 console 界面

<script>console.log(5 + 6);</script>

1.4js动态添加div和删除div

<div id="container"><input type="text" id="test"><button id="add">添加</button></div><div><p>tetse</p></div><script type="text/javascript">var add = document.getElementById('add');var container =document.getElementById('container');var node=container.nextSibling;add.onclick = function(){oDiv = document.createElement('div');oDiv.innerHTML = "<div id='container1'><input type='text' id='test'><input type='button' onclick='test(this)' value='减少'/></div>";container.parentNode.insertBefore(oDiv, node)node=oDiv.nextSibling;}function test(test){test.parentNode.parentNode.removeChild(test.parentNode);}</script>

1.5  div  三列布局

<title>三列布局</title><style type="text/css">body,h1{margin: 0;padding: 0;}.left{float: left;width: 33%;background-color: black;color: green;height: 250px;}.middle{float: left;width: 33%;background-color: yellow;height: 250px;color: gray;}            .right{float: right;width: 33%;background-color: green;height: 250px;color: red;}.main{width: 90%;margin: 0 auto;text-align: center;}</style>

<div id="maincontainer">            <div id="main2" class="main1">            <div id="main20" class="left"> </div>            <div id="main21" class="middle"> </div>            <div id="main22" class="right"></div>            </div>        </div>

1.6