第一天，学习了网页基础知识，包括html、css、js，并且进行了初步的运用，如下：
1、通过js获取输入框中的vlaue值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取输入框的值</title>
</head>
<body>
<input type="text" id="inp">
<input type="button" value="提交" id="btn" onclick="show()">
</body>
<script type="text/javascript">
function show(){
var a=document.getElementById('inp');
var b=a.value;
alert(b);
};
</script>
</html>
2、点击某个元素，更改该元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变元素样式</title>
<style type="text/css">
li{
background: red;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];
var li = document.getElementsByTagName("li");
ul.onclick= function(e){
for (var i = 0; i < li.length; i++) {
li[i].style.background = "red";
}
var temp = e.srcElement;
temp.style.background= "blue";
}
</script>
</body>
</html>
3、互换变量值
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>a、b变量互换</title>
</head>
<body>
<p>a=1</p>
<p>b=2</p>
<script type="text/javascript">
window.onload=function(){
var a=1;
var b=2;
[a,b]=[b,a];
console.log("a="+a+",b="+b+"");
}
</script>
</body>
</html>
4、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
</head>
<script>
function changeContent() {
for (var n = 1; n < 10; n++) {
//循环输出每行内容
for (var m = 1; m <= n; m++) {
document.write(m + "*" + n + "=" + (m * n) + "<span> </span>");
}
document.write("<br/>");
}
}
</script>
<body>
<h1 id="demo">点击显示九九乘法表</h1>
<button type="button" onclick="changeContent()">显示</button>
</body>
</html>
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
