您的位置: 首页  >  文章  >  前端JS学习_Day16

前端JS学习_Day16

分类: 文章 • 2024-12-09 18:38:46

页面布局方式

前端JS学习_Day16前端JS学习_Day16
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>页面布局</title>
 6     <style>
 7         body{
 8             margin:0;
 9         }
10         .left{
11             float: left;
12         }
13         .right{
14             float: right;
15         }
16         .pg-header{
17             height: 48px;
18             background-color: #2459a2;
19         }
20         .pg-body .pg-menu{
21             width: 10%;
22             background-color: bisque;
23             position: absolute;
24             top:48px;
25             left: 0;
26             bottom: 0;
27         }
28         .pg-body .pg-content{
29             width: 90%;
30             position: absolute;
31             top:48px;
32             right: 0;
33             bottom: 0;
34             overflow: auto;
35             background-color: blue;
36             z-index: 9;
37         }
38         .pg-header .logo{
39             color: black;
40             text-align: center;
41             width: 10%;
42             line-height: 48px;
43             background-color: wheat;
44         }
45         .pg-header .userinfo img{
46             border-radius: 50%;
47         }
48         .pg-header .userinfo{
49             border: 1px solid red;
50             margin-top: 4px;
51             width: 140px;
52         }
53         .pg-header .userinfo .infolist{
54             display: none;
55         }
56         .pg-header .userinfo:hover .infolist{
57             display: block;
58             color: red;
59         }
60         .pg-header .userinfo .infolist{
61             /*background-color: green;*/
62             /*position: absolute;*/
63             /*top:43px;*/
64             /*right: 36px;*/
65         }
66         .pg-header .userinfo .infolist a{
67             display: block;
68             color: white;
69             width: 140px;
70         }
71     </style>
72 </head>
73 <body>
74     <div class="pg-header">
75         <div class="logo left">
76             <span>欢迎光临</span>
77         </div>
78         <div class="userinfo right" style="position: relative">
79             <a href=""><img src="1.jpg" alt="" width="40" height="40"></a>
80             <div class="infolist" style="position: absolute;top:42px;right: 20px;z-index: 10;">
81                 <a>我的信息</a>
82                 <a>登录</a>
83             </div>
84         </div>
85     </div>
86     <div class="pg-body">
87         <div class="pg-menu">
88             这是菜单侧边栏
89         </div>
90         <div class="pg-content">
91             这是内容
92             <p>这是内容</p>
93             <p>这是内容</p>
94             <p>这是内容</p>
95         </div>
96     </div>
97 </body>
98 </html>
页面布局

JavaScript介绍

1.被设计用来向html页面添加交互行为

2.是一种脚本语言

3.由数行可执行的计算机代码组成

4.通常直接嵌入html页面

5.是一种解释性语言

JS能做什么

表单数据验证

动态HTML

用户交互

少量数据查找

AJAX核心技术

语法规范

<script>  <script> 写在head里面

最常用的写在body里面的最下面

两个最常用的方法：

console.log() 以及alert()

变量

JS对大小写敏感

第一个字符必须是字母、下划线、美元符号

规则  var 变量名 = 变量值

数据类型

和python基本一致

var num1 = 1.1; 浮点数1.1

var num2 = .1; 表示0.1

JS系统函数

parseInt()

解析一个字符串，返回一个整数。

如果中间遇到不合法的字符，马上停止解析，返回已经解析过的数值

例如： parsent("23")  返回23

parseInt("23xy")  返回23

parseInt("xs23xy")  返回NaN

parseFloat()

剖析参数字符返回浮点数

例如： parseInt("23.09")  返回23.09

parseInt("23.09xy")  返回23.09

parseInt("xs23.08xy")  返回NaN

JS字符串

变量 = ‘字符串’

字符串对象名称 = new String(字符串)

前端JS学习_Day16

 JavaScript数组

创建数组：

var arrname=[元素0.元素1，元素2.......];

前端JS学习_Day16

跑马灯案例

前端JS学习_Day16前端JS学习_Day16
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <marquee behavior="" direction="">alex is sb</marquee>
 9 <div id="wel">欢迎光临</div>
10 </body>
11 <script>
12     function test(){
13         var mywel = document.getElementById("wel");
14         var content = mywel.innerText;
15         var f_content = content.charAt(0);
16         var l_content = content.substring(1,content.length);
17         var new_content = f_content + l_content;
18         //mywel.innerText;
19         mywel.innerText = new_content;
20     }
21 
22     setInterval("test();",500);
23 </script>
24 </html>
跑马灯

 

遍历数组

1. for(var i=0;1<obj.length;i++)

2.for(var i in 数组/对象)

注意：前者只可以遍历普通的数组，后者可以遍历数组或对象

var arr = ['zhagnsan','lisi','ergouzi'];
    for(var i=0;i<arr.length;i++){  //第一种
        console.log('nihao,zhaodole')
    }
    var dict={"name":"lisi","age":23};
    for(var i dict){  //第二种
        console.log(arr[i]);
    }

 

JAvaScript算数类

Math.ceil（数值）

Math.floor(数值)

Math.round(数值)

Math.min(数值1，数值2)

运算符

和python类似

JS流程控制

顺序结构

分支结构

if..elif..elif...else

 switch...case

前端JS学习_Day16前端JS学习_Day16
 1 <script>
 2     var alex_age = 66;
 3     switch(alex_age){
 4         case 66:
 5             console.log("快了")
 6             break
 7         case 73:
 8             console.log("走了")
 9             break
10         case 88:
11             console.log("早走了")
12             break
13     }
14 </script>
switch

 

循环结构

do.....while

done

函数

三种书写方式：

1.function test(){

console.log();

}

2.var func = function(){   //把函数赋值给变量

console.log("test");

}

3.(function(){   //直接调用

console.log("test");

})

 系统函数JSON

JSON.stringify()  序列化

JSON.parse()  反序列化

var arr = ['zs','lisi','tao'];
undefined
JSON.stringify(arr);
>>"["zs","lisi","tao"]"

var res = JSON.stringify(arr);
JSON.parse(res);
>>["zs", "lisi", "tao"]

转义

前端JS学习_Day16

 

时间对象

时钟案例

前端JS学习_Day16前端JS学习_Day16
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="clock">
 9 
10 </div>
11 <script>
12     function clock() {
13         var mydate = new Date();
14         var myyear = mydate.getFullYear();
15         var mymonth = mydate.getMonth() + 1;
16         var myday = mydate.getDate();
17         var myhour = mydate.getHours();
18         var myminuts = mydate.getSeconds();
19         var mysec = mydate.getSeconds();
20         var res = myyear + "-" +mymonth+"-"+myday+" " +myhour+":"+myminuts+":"+mysec;
21         console.log(res)
22         var myclock = document.getElementById("clock")
23         myclock.innerText = res
24     }
25     setInterval("clock();",1000);
26 
27 </script>
28 </body>
29 </html>
时钟案例

JS之DOM操作

文档对象模型(Document Object Model)

定义了访问和操作html文档的标准方法

把html呈现为带有元素、属性和文本的树结构

直接查找

document.getElementById("name")

document.getElementByTagName("tagname")

document.getElementsByName("name")

document.getElementsByClassName("name")

间接查找

parentElement  //父节点标签元素

children         //所有子标签

firstElementChild  //第一个子标签元素

lastElementChild  //最后一个子标签元素

nextElementtSibling  //下一个兄弟标签元素

previousElementSibling  //上一个兄弟标签元素

属性节点的操作

tag.className  ==>直接整体做操作

tag.classList.add('样式名')  添加指定样式

tag.classList.remove('样式名')  删除指定样式

获取文本节点的值

innerText  innerHtml

value获取当前选中的value值

1.input value获取当前标签中的值

2.select (selectIndex)

3.textarea

innerHTML 给节点添加html代码

该方法不是w3c的标准，但是主流浏览器支持

tag.innerHTML = "<p>显示内容</p>"

相关推荐