制作一张简单的网页（HTML+CSS+JS) 【3】

最新推荐文章于 2023-12-25 08:15:54 发布

Shiwy_ab

最新推荐文章于 2023-12-25 08:15:54 发布

阅读量4.3w

点赞数 29

分类专栏： HTML_CSS_JS 文章标签： JavaScript 事件 DOM

本文链接：https://blog.csdn.net/Shiwy_ab/article/details/54967662

版权

HTML_CSS_JS 专栏收录该内容

4 篇文章 20 订阅

订阅专栏

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

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

1.写js的基本格式：

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

2.有关注释：

（1）单行注释：//

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

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

4.函数：

function 函数名() 
{      
     函数代码; 
}

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();

定义初始化：

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

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

get/setFullYear()

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

getDay()

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

get/setTime()

5.小写字母转大写字母

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

大写字母转小写字母

toLowerCase()

6.返回指定位置的字符

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

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

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

结果：0

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

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

8.字符串的分割split()

var mystr = "www.baidu.com";

document.write(mystr.split(".")+"</br>");
document.write(mystr.split("", 2)+"</br>“);

三.DOM操作

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

document.getElementById(“id”)

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

ducument,getElementsByname("name")

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

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

Object.innerHTML

举个例子��：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p id="test">hello world!</p>
    </body>  
    <script type="text/javascript">
        var mystr = document.getElementById("test")
        document.write("p标签修改之前："+mystr.innerHTML+ "</br>");
        mystr.innerHTML="hello DSCN!"
        document.write("p标签修改之前："+mystr.innerHTML + "</br>");
    </script>
</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来完成。

代码如下：

<html>
    <head>
        <style type="text/css">
            div {

                font-weight:bold;    
                font-family: Microsoft Yahei;
                width: 400px;
                padding-left: 50px;
                margin-left: 450px;
            }

            h1 {
                text-align: center;
            }

            #sub {
                background-color: #689;
                width: 250px;
                height: 30px;
                color:white;
                font-weight: bold;
            }
            body {
                background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICqQa_1024.jpg");
            }
        </style>
        <script type="text/javascript">
            function abc()
            {
                if (document.getElementById("name").value == "")
                {
                    alert("Please write your name!");
                    form.myname.focus();
                    return false;
                }
                if (document.getElementById("passward").value == "")
                {
                    alert("Please write your password!");
                    form.mypassward.focus();
                    return false;
                }
                if (document.getElementById("profile").value == "")
                {
                    alert("please write your profile!");
                    form.profile.focus();
                    return false;
                }
            }


        </script>

    </head>

    <body>
        <div id="sign">
            <h1>Sigh Up</h1></br>
            <h2>Your basic info</h2>
            <form>
                <strong>Name:</strong>
                <input type="text" name="myname" id="name"/></br>
                </br>

                <strong>Passward:</strong>
                <input type="password" name="mypassward" id="passward"/></br>
                </br>

                <strong>Age:</strong></br>
                <input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
                <input type="radio" name="age" value="2" />13 or older</br>
                </br>

                <strong>Your profile:</strong></br>
                <textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
                </br>

                <strong>Job Role:</strong></br>
                <select>
                    <option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
                    <option value="Back-End Developer" name="job">Back-End Developer</option>
                </select></br>
                </br>

                <strong>Interests:</strong></br>
                <input type="checkbox" name="development" value="1" checked="checked">Development</br>
                <input type="checkbox" name="design" value="2" >Design</br>
                <input type="checkbox" name="business" value="3" >Business</br>
                </br>

                <input type="submit" name="Sign Up" value="Sign Up" id="sub" onclick="abc()">
                </input>
            </form>
        </div>
    </body>
</html>

显示效果：

当我没填姓名时：

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

Shiwy_ab

关注

29
点赞
踩
259

收藏

觉得还不错? 一键收藏
5
评论
制作一张简单的网页（HTML+CSS+JS) 【3】

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

扫一扫