devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html学习笔记3_html字符串拼接

作者：知新_RL | 2024-02-16 11:53:50

赞

踩

html字符串拼接

1.javascript的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 内嵌式 -->
  9.     <script>
  10.         alert("我是内嵌式的js代码");
  11.     </script>
  12.     <!-- 外链式 -->
  13.     <script src="js/main.js"></script>
  14. </head>
  15. <body>
  16.     <!-- 行内式 -->
  17.     <input type="button" value="按钮" onclick="alert('你点我了!')">
  18. </body>
  19. </html>

2.变量的使用和数据类型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.  
  9.     <script>
  10.         //定义数字类型的变量
  11.         var iNum1 = 1;
  12.         var fNum1 = 2.5;
  13.         //定义字符串
  14.         var sName = "李四";
  15.         //定义boolean类型
  16.         var bIsOk = true;
  17.         //定义undefind类型
  18.         var unData;
  19.         // 定义空对象
  20.         var oData = null;
  21.         //定义JavaScript对象类型
  22.         var oPerson = {
  23.             name:"王五",
  24.             age:20
  25.         }
  26.         // alert(iNum1);
  27.         // alert(fNum1);
  28.         // alert(sName);
  29.         //查看数据类型使用typeof
  30.         // alert(typeof(iNum1));
  31.         // alert(typeof(fNum1));
  32.         // alert(typeof(sName));
  33.         // alert(typeof(bIsOk));
  34.         // alert(typeof(unData));
  35.         // alert(typeof(oData));
  36.         // alter(typeof(oPerson));
  37.         alert(oPerson.name);
  38.         console.log(oPerson.name);
  39.  
  40.         var iNum2 = 3, sStr = '李四';
  41.         console.log(iNum2);
  42.         console.log(sStr);
  43.  
  44.     </script>
  45. </head>
  46. <body>
  47.     
  48. </body>
  49. </html>

3.函数的定义和调用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         //定义函数的关键字function
  10.         function fnShow(){
  11.             alert('我是一个无参数无返回值的函数');
  12.         };
  13.         //调用函数执行函数里面的代码
  14.         fnShow()
  15.  
  16.         //定义一个有参数有返回值的函数
  17.         function fnShow(iNum1,iNum2){
  18.             var iResult = iNum1 + iNum2;
  19.             return iResult
  20.             alert('测试代码');
  21.         }
  22.  
  23.         var iNum = fnSum(1, 2);
  24.         alert(iNum);
  25.     </script>
  26. </head>
  27. <body>
  28.     
  29. </body>
  30. </html>

4.局部变量和全局变量的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         //局部变量:在函数内定义的变量叫局部变量，只能在函数内部使用
  10.         function fnShow(){
  11.             var iNum = 1;
  12.             alert(iNum)
  13.         }
  14.         //调用函数
  15.         fnShow()
  16.         //局部变量不能在函数外使用
  17.         //alert(iNum);
  18.         //全局变量:在函数外定义的变量叫全局变量，可以在不同函数内使用，并且不同函数共享全局变量
  19.         var iNum1 = 1;
  20.  
  21.         function fnModify(){
  22.             alert(iNum1);
  23.             iNum1 = 3;
  24.             //++ 等价于 += 1
  25.             iNum1++
  26.             alert(iNum1);
  27.         }
  28.  
  29.         fnModify()
  30.         alert("函数外访问的全局变量" + iNum1);
  31.     </script>
  32. </head>
  33. <body>
  34.     
  35. </body>
  36. </html>

5.条件判断结合比较运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         var iNum = 5;
  10.         var iStr = "5";
  11.         //在js里面如果数字和字符串进行比较，会自动把字符串转成数字类型再进行比较
  12.         if(iNum == iStr){
  13.             alert("条件成立");
  14.         }
  15.  
  16.         if(iNum < iStr){
  17.             alert("条件成立");
  18.         }else{
  19.             alert("条件不成立");
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     
  25. </body>
  26. </html>

6.获取元素标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         //js的内置对象,html的文档对象
  10.         // 如果获取的对象是null, 表示标签没有获取成功
  11.         function fnLoad(){
  12.         var oP = document.getElementById("p1");
  13.         alert(oP);
  14.         }
  15.         //页面标签和数据都加载完成以后会触发onload事件
  16.         window.onload = fnLoad;
  17.     </script>
  18. </head>
  19. <body>
  20.     <p id="p1">呵呵，我是一个段落标签</p>
  21. </body>
  22. </html>

7.标签属性的获取和设置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.  
  9.     <style>
  10.         .btnstyle{
  11.             background: yellow;
  12.             font-size: 30px;
  13.         }
  14.     </style>
  15.  
  16.     <script>
  17.         window.onload = function(){
  18.             //根据id获取标签对象
  19.             var oBtn = document.getElementById("btn1");
  20.             // 获取标签的属性
  21.             alert(oBtn.type);
  22.             alert(oBtn.value);
  23.             // 设置标签的属性
  24.             oBtn.name = "username";
  25.             //设置样式的属性
  26.             //oBtn.style.background="red";
  27.             //相当于设置class, 以后通过类选择器给标签添加样式
  28.             //注意点：class变成classname
  29.             oBtn.className = "btnstyle"
  30.             oBtn.style.fontSize = "30px";
  31.         };
  32.     </script>
  33.  
  34. </head>
  35. <body>
  36.  
  37.     <input type="button" value="按钮" id="btn1">
  38.     
  39. </body>
  40. </html>

8.获取标签内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.  
  9.     <script>
  10.         window.onload = function(){
  11.             // 根据标签id获取标签对象
  12.             var oDiv = document.getElementById("div1")
  13.             // 获取标签内容
  14.             alert(oDiv.innerHTML);
  15.             oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
  16.         }
  17.     </script>
  18.  
  19.  
  20. </head>
  21. <body>
  22.     <div id="div1">
  23.         哈哈，不要睡觉!
  24.     </div>
  25.     
  26. </body>
  27. </html>

9.数组的定义和数组操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         //定义数组
  10.         var aArray1 = new Array(1, 2, 3);
  11.         console.log(aArray1);
  12.         //自变量方式创建，相当于直接赋值一个数组，数组的表现形式是一对中括号
  13.         var aArray2 = [3, 6, 9];
  14.         console.log(aArray2);
  15.         alert(aArray2);
  16.         //多维数组
  17.         var aArray3 = [[1, 2, 3], [3, 6, 9]];
  18.         console.log(aArray3);
  19.         alert(aArray3[0][1]);
  20.         var aArray4 = [3, 6, 9];
  21.         alert(aArray4.length);
  22.         //js里面不支持负数下标
  23.         aArray4[1] = 26
  24.         console.log(aArray4);
  25.         //追加数据
  26.         aArray4.push('hello');
  27.         console.log(aArray4);
  28.         //删除最后一个元素,这里pop不支持根据下标删除
  29.         var oValue = aArray4.pop()
  30.         console.log(oValue);
  31.         console.log(aArray4);
  32.         //插入数据
  33.         //1.开始删除的索引
  34.         //2.删除的个数
  35.         //3.插入的数据
  36.         aArray4.splice(1, 0, '苹果', '香蕉');
  37.         console.log(aArray4);
  38.  
  39.  
  40.     </script>
  41. </head>
  42. <body>
  43.     
  44. </body>
  45. </html>

10.循环语句

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         var aArray = [1, 3, 9];
  10.  
  11.         //for 循环遍历数组
  12.         for(var index = 0; index < aArray.length; index++){
  13.             //根据下标获取数据
  14.             var oValue = aArray[index];
  15.             alert(oValue);
  16.         }
  17.         //开始取值的下标
  18.         var index = 0
  19.         while (index < aArray.length){
  20.             var oValue = aArray[index];
  21.             alert(oValue);
  22.             index++;
  23.         }
  24.  
  25.         
  26.  
  27.     </script>
  28. </head>
  29. <body>
  30.     
  31. </body>
  32. </html>

11.字符串拼接

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         var sName = '李四';
  10.         var iAge = 20;
  11.         var sSex = '男';
  12.         var sResult = sName + sSex;
  13.         alert(sResult);
  14.         //字符串和数字进行拼接，底层自动把数字类型转成字符串，这种操作叫隐式类型转换
  15.         sResult = sName + iAge
  16.         alert(sResult);
  17.     </script>
  18. </head>
  19. <body>
  20.     
  21. </body>
  22. </html>

12.定时器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 定时器:根据指定的时间间隔延时调用指定的函数 -->
  9.     <script>
  10.         function fnShow(name, age){
  11.             alert("ok" + name + age);
  12.             alert(tid)
  13.             //销毁定时器
  14.             clearTimeout(tid);
  15.         }
  16.  
  17.         //根据时间间隔调用一次函数的计时器
  18.         //1.定时器要执行的函数
  19.         //2.时间间隔
  20.         //3.参数，多个参数使用逗号分隔
  21.         //var tid = setTimeout(fnShow, 2000, '李四', 20)
  22.  
  23.         function fnShowInfo(name, age){
  24.             alert("ok" + name + age)
  25.         }
  26.  
  27.         function fnStop(){
  28.             //alert(tid);
  29.             //销毁定时器
  30.             clearInterval(tid);
  31.         }
  32.  
  33.         // //根据时间间隔重复函数的计时器
  34.         var tid = setInterval(fnShowInfo, 3000, '李四', 22);
  35.  
  36.  
  37.  
  38.     </script>
  39. </head>
  40. <body>
  41.     <input type="button" value="停止" onclick="fnStop();">
  42.     
  43. </body>
  44. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/92923
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号