1.通过js获取输入框中的vlaue值
代码实现模块
<body>
<From>
<p>请在输入框中输入内容</p>
<Input type="text" id="hhh" value=" " />
<Input type="button" id="on" value="提交" οnclick=" doClick()" />
</From>
<script>
function doClick() {
console.log('获取输入框中的value值');
var p = document.getElementById('hhh').value;
alert("获取的输入框内容为:"+p);
}
</script>
</body>
效果图如下
2.互换变量值
<body>
<script type="text/javascript">
//文档加载完成
window.onload = function(){
console.log('两个变量间互换值');
var a=8;
var b=2;
console.log('两个变量开始时的值为');
console.log('a='+a);
console.log('b='+b);
console.log('两个变量变换后的值为');
a+=b;
b=a-b;
a=a-b;
console.log('a='+a);
console.log('b='+b);
}
</script>
</body>
效果图如下
3.乘法口诀
<body>
<script type="text/javascript">
//文档加载完成
window.onload = function(){
console.log('九九乘法表');
for ( var x = 1; x <= 9; x++) {
mul="";
for ( var y = 1; y <= x; y++) {
mul+=x+"*"+y+" = "+(x*y)+" ";
}
console.log(mul);
}
//用console.log打印99乘法表
}
</script>
</body>
效果图如下
4.点击某个元素，更改该元素的样式
<body>
<div>
<h1 id="id1" οnclick="myFunction1()">这是h1标题！</h1>
<h2 id="id2" οnclick="myFunction2()">这是h2标题！</h2>
<h3 id="id3" οnclick="myFunction3()">这是h3标题！</h3>
</div>
<script>
function myFunction1() {
document.getElementById('id1').style.color='green';
}
function myFunction2() {
document.getElementById('id2').style.color='blue';
}
function myFunction3() {
document.getElementById('id3').style.color='pink';
}
</script>
</body>
效果图如下
学习总结：
今天老师主要给我们讲解了HTML，CSS等一些前端基础理论知识，同时也初步接触js的一些运用
1.对于js这一块，因为之前没有太多了解，所以做作业的时候需要先查阅资料，学习相关知识，对于实训课程而言可能这是础，但对于我来说还是需要先认真了解js基础知识
2.前端的学习看似在一开始会比较好懂，但同样要大量的实践才能运用好，毕竟所有的知识都是越学越难的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
