1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html和css制作简单的个人网页代码 制作一张简单的网页(HTML+CSS+JS) 【3】

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

时间:2023-08-31 17:06:46

相关推荐

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

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

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

1.写js的基本格式:

结果:0

4

9

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

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

8.字符串的分割split()

var mystr = "";

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

显示效果:

当我没填姓名时:

当我没输入密码时,然后以此类推:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。