一、基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础语法</title>
</head>
<body>
<script type="text/javascript">
var a = 10;
var b = "123";
var c = '456';
var d = true;
var e = false;
var f = null ;
var g;
console.log("5" == 5);
console.log("5" === 5)
console.log("5" != 5);
console.log("5" !== 5)
for (var a = 3; a < 10; a +=5) {
setTimeout(function(){
console.log(a);
},1000);
}
console.log(typeof a);
console.log(Number(true));
console.log(Number(false));
console.log(Number("5"));
console.log(Number("a"));
console.log(Number("b1"));
console.log(Number(""));
console.log(Number(" "));
console.log(Number("99"));
console.log(String(true))
console.log(Boolean(1))
console.log(String(" "));
console.log(3 + true);
console.log(null + 5);
console.log( false + "2");
console.log(5 - true);
console.log(7 + null);
console.log(6 + undefined);
console.log(parseInt(5.6));
console.log(parseInt("5.6"));
console.log(parseInt("34abd"));
console.log(parseInt("23ab34"))
console.log(parseInt("a33"))
console.log(parseInt(15,8));
var num = parseInt(Math.random()*(30 -20 +1)+20);
console.log(num)
function test(a,b){
console.log(a + b);
return a * b;
}
var c = test(10,20);
console.log(c);
test();
var fn = function(){
console.log("我是匿名函数第三执行顺序");
};
(function(){
var t = 100;
console.log("我是匿名函数第一执行顺序1");
})();
(function(){
console.log("我是匿名函数第二执行顺序2");
}());
fn();
var shuzu = [2,8,3,5,12];
for (var i = 0; i < shuzu.length; i++) {
for (var j = 1+i; j < shuzu.length+i; j++) {
if (shuzu[i]<shuzu[j]) {
var a1 = shuzu[i];
shuzu[i] = shuzu[j];
shuzu[j] = a1;
}
}
}
console.log(shuzu);
console.log(shuzu[1]);
function text(){
}
var suiji = [];
for (var i = 0; ; i++) {
if (suiji.length<10) {
suijf();
}else{
break;
}
}
function suijf(){
var num = (parseInt)(Math.random()*(29-0+1)+0);
for (var i = 0; i < suiji.length; i++) {
if (suiji[i] == num) {
return false;
}
}
suiji.push(num);
}
console.log(suiji);
</script>
<script type="text/javascript" src="xx.js" >
</script>
</body>
</html>
二、DOM语法(创建,设置,添加,替换,删除,获取,修改)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.item{
width: 200px;
height: 200px;
margin: 10px;
border: 10px blue solid;
overflow: scroll;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box">
我是box
<p>P</p>
</div>
</body>
<script type="text/javascript">
var newDiv = document.createElement("div");
newDiv.className = "item";
newDiv.id = "first";
newDiv.style.background = "red";
var body = document.getElementsByTagName("body")[0];
var box = document.getElementsByClassName("box")[0];
body.appendChild(newDiv);
body.insertBefore(newDiv,box);
body.replaceChild(newDiv,box);
box.remove();
var obj = {
name:"丁鹏",
age:18,
gender:"man",
eat:function(){
console.log("开始吃饭");
}
};
obj.add = 1;
console.log(obj);
console.log(obj.age);
obj.eat();
console.log(newDiv);
console.log(box.childNodes);
console.log(box.children[0]);
console.log(newDiv.offsetWidth);
console.log(newDiv.clientWidth);
console.log(newDiv.offsetHeight);
console.log(newDiv.clientHeight);
console.log(newDiv.scrollHeight);
console.log(newDiv.offsetTop);
console.log(newDiv.offsetLeft);
console.log(newDiv.scrollTop);
setInterval(function(){
newDiv.scrollTop= 2000;
},1000);
console.log(newDiv.scrollLeft);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<style type="text/css">
#first{
width: 200px;
height: 200px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="first"></div>
<input type="text" class="uName">
<input type="button" values ="点我呀">
</body>
<script type="text/javascript">
var first = document.getElementById("first");
first.style.backgroundColor="blue";
first.style.border="5px black solid";
first.style.margin="0px auto";
first.innerHTML = "<p>福</p>";
first.innerText = "<p>福</p>";
console.log(first.innerHTML);
var uNames = document.getElementsByClassName("uName");
uNames[0].value = "我是一个输入框";
console.log(uNames[0].value);
var button = document.getElementsByTagName("input")[1];
var a = 1;
button.onclick = function(){
console.log(123);
uNames[0].value = a++;
first.style.transition ="1s";
first.style.width = a *10 +"px";
first.style.height = "100px";
}
</script>
</html>