html和css制作简单的个人网页代码,制作一张简单的网页（HTML+CSS+JS) 【3】

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

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

1.写js的基本格式：

结果：0

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

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

8.字符串的分割split()

var mystr = "www.baidu.com";

document.write(mystr.split(".")+"");

document.write(mystr.split("", 2)+"“);

三.DOM操作

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

document.getElementById(“id”)

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

ducument,getElementsByname("name")

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

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

Object.innerHTML

举个例子��：

TODO supply a title

hello world!

显示效果：

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来完成。

代码如下：

Sigh Up

Your basic info

Name:

Passward:

Age:

Under 13

13 or older

Your profile:

Job Role:

Front-End Developer

Back-End Developer

Interests:

Development

Design

Business

显示效果：

当我没填姓名时：

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

html和css制作简单的个人网页代码,制作一张简单的网页（HTML+CSS+JS) 【3】相关推荐

❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
抖音记事本代码html,抖音表白程序制作教程抖音表白代码制作分享-记事本文件...
抖音表白程序制作教程抖音表白代码制作分享抖音是一款短视频软件,上面有很多新奇而富有创意的玩法,比如最近很火的利用弹窗表白,那么抖音表白程序应该怎么制作呢?下面小编给大家带来抖音表白程序制作教程分享 ...
html大作业网页代码——电竞游戏介绍响应式网页(7页) HTML+CSS+JavaScript
HTML5期末大作业:电竞游戏网站设计--电竞游戏介绍响应式网页(7页) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
html大作业网页代码 ——A+海贼王(8页) HTML5网页设计成品_学生DW静态网页设计
HTML5期末大作业漫画网站设计--A+海贼王(8页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML5期末大作业漫画网站设计--A+海贼王(8页) HT ...
html大作业网页代码计——美食餐饮管理(8页) HTML+CSS+JavaScript 美食餐饮商品设计食物海鲜网页
HTML5期末大作业:美食餐饮网站设计--美食餐饮管理(8页) 文章目录 HTML5期末大作业:美食餐饮网站设计--美食餐饮管理(8页) 一.作品展示二.文件目录三.代码实现四.获取更多源码一 ...
大学生抗疫逆行者网页作业感动人物HTML网页代码成品最美逆行者dreamweaver网页模板致敬疫情感动人物网页设计制作
抗疫行动题材网页设计大学生最美逆行者感动人物网页代码众志成城万众一心抗击疫情HTML网页设计
对搜索引擎友好的网页设计制作（转）
一般的网页设计都由网页设计师完成.设计师设计网站往往仅从美观.创意和易用的角度考虑,这对于一个期望获得搜索引擎排名优秀的商业网站来说,已经远远不够了,网站策划人员至少应该为设计师递交一份需求备忘录,提 ...
搜索优化之友好的网页设计制作
对搜索引擎友好的网页设计制作,一般的网页设计都由网页设计师完成.设计师设计网站往往仅从美观.创意和易用的角度考虑,这对于一个期看获得搜索引擎排名优秀的贸易网站来说,已经远远不够了,网站策划职员至少应该 ...
UI网页设计制作思路
所谓的网页设计,大家应该知道,也就是我们常在浏览器上看到的网页.先前我们学习了UI设计的平面设计,不止如此.UI设计可以分为4个设计:平面设计(GUI).商业设计(AUI).网页设计(WUI).移动界 ...

html和css制作简单的个人网页代码,制作一张简单的网页（HTML+CSS+JS) 【3】

html和css制作简单的个人网页代码,制作一张简单的网页（HTML+CSS+JS) 【3】相关推荐

最新文章

热门文章