zoukankan      html  css  js  c++  java

  • 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>

    显示效果：

    当我没填姓名时：

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

    另外安利一个学习教程：高级工程师手把手带你做企业门户前端（视频+源码）
  • 相关阅读:
    20211111避免对需求、功能理解断层问题的思考
    20211216部门日报综述优化建议
    想买二手房，听说房子过户了也可能住不进去，怎么避免？
    20220104tapd需求与测试用例打“作废”标记建议
    wps的SUM函数计算失败问题
    SQL注入测试总结
    缺陷标题
    12.6 Markdown高级技巧
    学期内容的总结
    12.5Markdown高级技巧
  • 原文地址：https://www.cnblogs.com/alex96/p/12146127.html
Copyright © 2011-2022 走看看