CSSJS--用JS让文字闪烁起来

一、JS的内嵌样式与外联样式

像CSS一样，JS的代码块可以写在html里面，也可以写到单独的一个JS文件里。那么，放置哪里呢？

1、内嵌样式

console.log("test js")

</script>

2、外联样式

</script>

目录是这样的：

WORD_PHOTO

... ...JS

... ...test.js

... ...test.html

也就是说，src后面的引号中要跟的是与html相对路径，test.html要访问test.js就要先进入js这个文件夹，所以是js/test.js

备注：html忽略大小写。

二、让文字闪烁起来

1、目录结构

WORD_PHOTO

... ...CSS

... ...photo_test.css

... ...word_test.css

... ...Images

... ...01.PNG

... ...02.PNG

... ...03.PNG

... ...04.PNG

... ...05.PNG

... ...06.PNG

... ...JS

... ...test.js

... ...test.html

二、JS的外联样式测试

1、html中的script

test.html:

test.js:

console.log("test js")

2、代码和页面展示

test.html

test.js

web展示

当web页面的控制台出现test js时，说明js的外联样式打通。

三、文字闪烁

1、元素集合

HTMLCollection，是HTML元素的集合。

getElementsByClassName("xxx")方法会返回一个HTMLCollection对象，而这个对象是一个数组列表。

代码：

web和console：

2、JS的遍历循环

Python中的循环可以用for，JS中的循环也可以用for：

web和console

3、window.onload()

window.onload()方法用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法。

语法：

window.οnlοad=function(){

Func();

}

4、setInterval()方法

setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

如，3000毫秒一次打印hello：

setInterval(function(){console.log("hello");},3000;)

5、生成指定范围的随机整数

Math.random()，返回一个介于0到1（不包含）之间的一个随机数；

Math.floor((Math.random()*10) + 1)，返回一个1到10之间的一个随机数；

Math.floor(Math.random() * (max - min + 1) + min)，返回一个max到min之间的数字，不包含max

6、让文字闪烁起来

设置某元素的颜色为红色：

element.style.color = "red";

备注：

a、第1行到第11行是一个名为blinklink的方法体；

b、第12行是等待html加载完成后执行的方法；

c、第14行，每500ms执行一次方法体；

d、循环体：

A、第2行，获取class属性值为li_left的元素集合；

B、第3行，通过for循环遍历；

C、第4行，获取每个li_left下的标签属性值为a的元素集合；

D、第5行，通过for循环遍历；

E、第6、7和8行，随机一个整数，然后给元素设置颜色；

以上。

CSSJS--用JS让文字闪烁起来相关推荐

php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
html字体自动变化颜色,JS实现文字闪烁自动变换颜色代码3则
当网页中某处文字需要不停闪烁加强醒目效果的时候,我们很容易想到用javascript来实现,没错,这个实现起来并不算复杂,下面我们就来分享3则比较简洁的文字自动闪烁特效代码.JS实现文字自动变换颜色第 ...
利用html实现文字闪烁的效果代码
利用html实现文字闪烁的效果代码单个元素设置闪烁效果多个元素设置闪烁效果网页中使文字闪烁的标签是什么,其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现. 单个元素设置闪烁效果 ...
css 字符闪烁,CSS3-动画-文字闪烁
文字闪烁文字闪烁是一种动画,在css中要达到类似的效果,除了使用js设置修改,第一时间想到的就是css中的animation(动画)了. CSS3 动画通过 CSS3,我们能够创建动画,这可以在许 ...
【android】TabLayout文字闪烁问题
安卓MD设计提供了一个非常酷炫的效果,TabLayout拿来做选项卡时非常合适的,但是在实际使用中发现22.2.1版本号的TabLayout在ViewPager滑动的时候会出现闪烁现象. 解决方法:在 ...
文字转语音+html5,JS实现文字转语音并播放
html: div> audio> div> js: function doTTS() { var ttsDiv = document.getElementById('bdtts_d ...
使用JS实现文字搬运工
使用JS实现文字搬运工效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...
php实现文字向左跑马灯,js实现文字跑马灯效果
js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...
html语言闪烁特效代码,css3 文字闪烁特效代码
今天给大家分享几个文字闪烁特效代码,纯css3代码实现,对于新手小伙伴值得拿来学习一下. 文字闪烁特效一通过改变透明度来实现文字的渐变闪烁,代码如下: 文字闪烁:闪烁效果 .main{ color: ...

CSSJS--用JS让文字闪烁起来

CSSJS--用JS让文字闪烁起来相关推荐

最新文章

热门文章