201711671226 信管1172 实训总结一

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.前端的学习看似在一开始会比较好懂,但同样要大量的实践才能运用好,毕竟所有的知识都是越学越难的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值