js做个网页（HTML+CSS+JS）

转载https://blog.csdn.net/shiwy_ab/article/details/54967662

        前面两篇文章写了HTML和CSS，接下来这篇我把我学到的JavaScript，做一下简单的总结。如果我把一张网页比作是一幢大楼，那么HTML就是大楼的根基和基本骨架，CSS就是使大楼宏伟的一些装饰物，那么JS就是大楼里面活动的东西。简单的说就是网页上的特效效果都要靠JS来完成，比如一些焦点新闻的轮换、与用户的交互等等。

一.JS的基本知识及窗口交互

1.写js的基本格式：

 <script type="text/javascript”>...</script>

2.有关注释：

 （1）单行注释：//

 （2）多行注释：/*.......*/ 

3.定义变量：var 变量名；

4.函数：

  1. function 函数名() 
  2. {      
  3.      函数代码; 
  4. }

5.输出内容：document.write()

   (1)多项内容之间用“+”

   (2)要输出空格的时候，可以在输入时加“&nbsp”，一个“&nbsp”表示一个空格。 

6.窗口交互方法

（1）消息对话框-警告：alert（字符串或变量）；

 

(2)消息对话框-确认：confirm（str）；

 

(3)消息对话框-提问:prompt(str1,str2);

   需要注意的是str1是显示在文本框中的内容，不可以修改

   而str2是自己要输进去的内容，这是可以修改的 

 

(4)打开新窗口

window.open([URL], [窗口名称], [参数字符串]}

1>URL这是在网页打开的地址或路径。

2>窗口名称：被打开窗口的名称，由字母、数字和下划线组成 

    一些特殊的名称：

_blank:在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top:框架网页中在上部窗口中显示目标网页

(5)关闭新窗口

Window.close();

二.认识事件和内置对象

我把一些常用的事件整理出来：

1.onclick（鼠标单击事件）

2.onmouseover（鼠标经过事件）

3.onmouseout（鼠标移开事件）

4.onfocus（光标聚焦事件）

5.onblur（失焦事件）

6.onselect（内容选中事件）

7.onchange（文本框内容改变事件）

8.onload（加载事件）

9.onunload（卸载事件）

 

接下来的内容是在js中内置对象

1.定义一个时间对象：

var Udate=new Date();

定义初始化：

  1. var d = new Date(2017, 10, 1);  //2017年10月1日
  2. var d = new Date('Oct 1, 2017'); //2017年10月1日

2.返回、设置年份，用四位数表示

get/setFullYear()

3.返回星期，返回的是0-6的数字，0表示星期天。如果要返回相对应“星期”，通过数组完成

getDay()

4.返回/设置时间，单位毫秒数

get/setTime()

5.小写字母转大写字母

  1. var mystr="Hello world!"; 
  2. var mynum=mystr.toUpperCase();

大写字母转小写字母

toLowerCase()

6.返回指定位置的字符

 字符串中第一个字符的小标是0，最后一个字符的下标为字符串长度减一(string.length-1)

7.返回指定的字符串首次出现的位置

  1. <script type="text/javascript">
  2.   var str="I love JavaScript!"
  3.   document.write(str.indexOf("I") + "<br />");
  4.   document.write(str.indexOf("v") + "<br />");
  5.   document.write(str.indexOf("v",8));
  6. </script>

结果：0

           4

           9

在该例子中，str.indexof(“v”,8) 这个的意思是说从该字符串的下标为8的数开始寻找v这个字符，找到它在9这个位置。

如果没有找到该字符，则会输出-1. 

8.字符串的分割split()

var mystr = "www.baidu.com";
  1. document.write(mystr.split(".")+"</br>");
  2. document.write(mystr.split("", 2)+"</br>“);

三.DOM操作

1.在网页中，我们通过id先找到标签，然后进行操作，这是通过ID获取元素。

document.getElementById(“id”)

当然，通过name属性查也未尝不可。

ducument,getElementsByname("name")

需要注意的是，id只能有一个，但是name属性可以不唯一。

2.通过innerHTML我们可以获取甚至改变网页上的内容。

Object.innerHTML

举个例子��：

  1. <html>
  2.     <head>
  3.         <title>TODO supply a title</title>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     </head>
  7.     <body>
  8.         <p id="test">hello world!</p>
  9.     </body>  
  10.     <script type="text/javascript">
  11.         var mystr = document.getElementById("test")
  12.         document.write("p标签修改之前："+mystr.innerHTML+ "</br>");
  13.         mystr.innerHTML="hello DSCN!"
  14.         document.write("p标签修改之前："+mystr.innerHTML + "</br>");
  15.     </script>
  16. </html>

显示效果：

3.在js中还能改变HTML的样式

(1)基本语法：

Object.style.property=new style;

（2）基本属性（property）

backgroundColor（元素的背景颜色）

height（元素的高度）

width（元素的宽度）

color（文本的颜色）

font（在一行设置所有的字体属性）

fontFamily（设置元素的字体系列）

fontSize（设置元素的字体大小）
4.显示和隐藏（display）

Object.style.display = value

值为none时，此元素会被隐藏；值为block时，此元素会被显示。

四.实例介绍

我们已经把网页加上了一些图片来修饰，接下来，我在上面两篇的代码基础之上，在加上一些其他的功能。比如检查表单有没有空格项用户没有填写，而这些需要js来完成。

代码如下：

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             div {
  5.  
  6.                 font-weight:bold;    
  7.                 font-family: Microsoft Yahei;
  8.                 width: 400px;
  9.                 padding-left: 50px;
  10.                 margin-left: 450px;
  11.             }
  12.  
  13.             h1 {
  14.                 text-align: center;
  15.             }
  16.  
  17.             #sub {
  18.                 background-color: #689;
  19.                 width: 250px;
  20.                 height: 30px;
  21.                 color:white;
  22.                 font-weight: bold;
  23.             }
  24.             body {
  25.                 background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICqQa_1024.jpg");
  26.             }
  27.         </style>
  28.         <script type="text/javascript">
  29.             function abc()
  30.             {
  31.                 if (document.getElementById("name").value == "")
  32.                 {
  33.                     alert("Please write your name!");
  34.                     form.myname.focus();
  35.                     return false;
  36.                 }
  37.                 if (document.getElementById("passward").value == "")
  38.                 {
  39.                     alert("Please write your password!");
  40.                     form.mypassward.focus();
  41.                     return false;
  42.                 }
  43.                 if (document.getElementById("profile").value == "")
  44.                 {
  45.                     alert("please write your profile!");
  46.                     form.profile.focus();
  47.                     return false;
  48.                 }
  49.             }
  50.  
  51.  
  52.         </script>
  53.  
  54.     </head>
  55.  
  56.     <body>
  57.         <div id="sign">
  58.             <h1>Sigh Up</h1></br>
  59.             <h2>Your basic info</h2>
  60.             <form>
  61.                 <strong>Name:</strong>
  62.                 <input type="text" name="myname" id="name"/></br>
  63.                 </br>
  64.  
  65.                 <strong>Passward:</strong>
  66.                 <input type="password" name="mypassward" id="passward"/></br>
  67.                 </br>
  68.  
  69.                 <strong>Age:</strong></br>
  70.                 <input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
  71.                 <input type="radio" name="age" value="2" />13 or older</br>
  72.                 </br>
  73.  
  74.                 <strong>Your profile:</strong></br>
  75.                 <textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
  76.                 </br>
  77.  
  78.                 <strong>Job Role:</strong></br>
  79.                 <select>
  80.                     <option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
  81.                     <option value="Back-End Developer" name="job">Back-End Developer</option>
  82.                 </select></br>
  83.                 </br>
  84.  
  85.                 <strong>Interests:</strong></br>
  86.                 <input type="checkbox" name="development" value="1" checked="checked">Development</br>
  87.                 <input type="checkbox" name="design" value="2" >Design</br>
  88.                 <input type="checkbox" name="business" value="3" >Business</br>
  89.                 </br>
  90.  
  91.                 <input type="submit" name="Sign Up" value="Sign Up" id="sub" οnclick="abc()">
  92.                 </input>
  93.             </form>
  94.         </div>
  95.     </body>
  96. </html>

显示效果：

当我没填姓名时：

当我没输入密码时，然后以此类推：

 

另外安利一个学习教程：高级工程师手把手带你做企业门户前端（视频+源码）

 

posted @ 2020-01-03 17:51  (至尊宝)  阅读(17693)  评论(0)  编辑  收藏  举报