html网页制作加js特效代码(用javascript制作网页效果)

如何在html中调用js代码

我们编写html的时候经常需要调用JS的相关代码，那么如何在HTML中调用JS的代码呢？下面我给大家分享一下。

工具/材料

Sublime text

01

首先打开Sublime text软件编写一个html页面，如下图所示

02

然后我们在html页面中添加script标签，在script里简单的写一些JS的代码，如下图所示

03

接下来可以定义一个button按钮，通过其click事件来调用JS的代码，如下图所示

04

当然，如果调用的JS代码是外部的文件，则需要在开头的head标签内进行引入才可以使用，如下图所示

如何在html中嵌套js代码块

两种方式：

一、如果是在网页直接写js代码，则在HTML中嵌入如下标签

script language='javascript'

// js代码

script

二、如果是外部js文件，则在HTML标签head/head之间嵌入如下标签

script src="外部文件路径/js文件" language="javascript" /script

例如：

script src="baobiao/js/CalendarSelector.js" language="javascript" /script

如何在HTML中加入JavaScript脚本?

①：可以直接在当前html文件里面写，如\x0d\x0a\x0d\x0a window.onload = function(){}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a②：可以新建一个后缀名为.js的脚本文件，然后在Html引入，如新建了一个index.js文件，然后在html中引入：\x0d\x0a\x0d\x0asrc里面是js文件的路径

怎样在网页中插入JavaScript代码

步骤

1、新建一网页文件“sample.html",用记事本或其它文本编辑软件（如UltraEdit）打开，输入如图所示的HTML代码。该网页文件包括一个蓝色的字符串，一个按钮和一个文本框。

2、JS代码可插入到”head"标签之间。编写Javascript代码，代码内容如图所示，并将该段代码复制到网页文件”sample.html“中标签”head"和“/head之间，然后查看网页文件的显示内容。

javascript特效如何插入HTML代码如下

你就直接插在html的body里就好了呀，bodyscript...你的内容/scriptdiv你所要的界面设计/div/body,也可以把该脚本放入js文件，然后再html的head里引入，如 script src="···.js"/script

怎么给html5背景加上js粒子特效

使用了particles.js

particles.js可以从github网站下载到最新的源码，网址是

使用方法非常简单

第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到

script?src="particles.min.js"/script

第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。

div?id="particles-js"/div

style?type="text/css"

#particles-js?{

position:?absolute;

top:0;

width:100%;

}

/style

第三步，设置窗口样式

style?type="text/css"

#particles-js?{

z-index:?-1;

position:?absolute;

top:?0;

width:?100%;

background:?#aaa;

}/style

第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在script标签里。无论如何，这段脚本要出现在div容器之后。

particlesJS("particles-js",?{??"particles":?{????"number":?{??????"value":?380,??????"density":?{????????"enable":?true,????????"value_area":?800

??????}

????},????"color":?{??????"value":?"#ffffff"

????},????"shape":?{??????"type":?"circle",??????"stroke":?{????????"width":?0,????????"color":?"#000000"

??????},??????"polygon":?{????????"nb_sides":?5

??????},??????"image":?{????????"src":?"img/github.svg",????????"width":?100,????????"height":?100

??????}

????},????"opacity":?{??????"value":?0.5,??????"random":?false,??????"anim":?{????????"enable":?false,????????"speed":?1,????????"opacity_min":?0.1,????????"sync":?false

??????}

????},????"size":?{??????"value":?3,??????"random":?true,??????"anim":?{????????"enable":?false,????????"speed":?40,????????"size_min":?0.1,????????"sync":?false

??????}

????},????"line_linked":?{??????"enable":?true,??????"distance":?150,??????"color":?"#ffffff",??????"opacity":?0.4,??????"width":?1

????},????"move":?{??????"enable":?true,??????"speed":?6,??????"direction":?"none",??????"random":?false,??????"straight":?false,??????"out_mode":?"out",??????"bounce":?false,??????"attract":?{????????"enable":?false,????????"rotateX":?600,????????"rotateY":?1200

??????}

????}

??},??"interactivity":?{????"detect_on":?"canvas",????"events":?{??????"onhover":?{????????"enable":?true,????????"mode":?"grab"

??????},??????"onclick":?{????????"enable":?true,????????"mode":?"push"

??????},??????"resize":?true

????},????"modes":?{??????"grab":?{????????"distance":?140,????????"line_linked":?{??????????"opacity":?1

????????}

??????},??????"bubble":?{????????"distance":?400,????????"size":?40,????????"duration":?2,????????"opacity":?8,????????"speed":?3

??????},??????"repulse":?{????????"distance":?200,????????"duration":?0.4

??????},??????"push":?{????????"particles_nb":?4

??????},??????"remove":?{????????"particles_nb":?2

??????}

????}

??},??"retina_detect":?true});