JS小案例-文本切换效果

下面是一个文本切换效果的小案例，希望可以可以帮助到有需要的小伙伴

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本切换效果</title>
</head>
<style>.container {width: 800px;height: 300px;background-color: cornflowerblue;border: #333;box-shadow: 2px 2px 10px #000;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-family: sans-serif;font-size: 50px;font-weight: 300;text-align: center;}
</style><body><div id="speak" class="container">其实，我想对你说.......</div><script>// 创建一个数组 -- 存储要所的话var arr = ['你真的很棒', '我好喜欢你', '你一定会成为你想成为的你']// 计数器var index = 0;// 1.获取<div>元素节点var speak = document.getElementById('speak');// 为<div>元素节点绑定事件speak.onclick = d = function () {if (index < arr.length) {// 2.根据<div>元素节点获取其文本子节点var textNode = speak.firstChild;// 3. // a. 创建一个新的文本节点，进行替换// b. 对文本节点中的文本内容进行修改if (textNode.nodeType === 3) {textNode.nodeValue = arr[index];}index++;}}</script>
</body></html>

JS小案例-文本切换效果相关推荐

JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
js小案例：实现选项卡功能
js小案例:实现选项卡功能 html部分代码 <button>1</button><button>2</button><button>3&l ...
JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...
小程序tab切换效果
小程序实现tab切换很简单,只需要完成两部分. 1.页面 2.js触发时间先上效果: image.png 接下来介绍页面代码: 控制切换的Tab <view class="swipe ...
[突发奇想的JS小案例] 2 重力模拟
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示可以利用鼠标拖动舞台中的方块,松开鼠标 ...
js代码实现繁体字切换效果
下载地址使用js代码实现网页上的简体中文和繁体字的切换效果,很实用的繁体字切换插件. dd:
[突发奇想的JS小案例] 1 捉苍蝇
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示这个小方块很像苍蝇,每当靠近就快速飞走 ...

JS小案例-文本切换效果

JS小案例-文本切换效果相关推荐

最新文章

热门文章