分类：JS

2020
09-24

原生JS实现留言板

原生JS实现留言板 本文实例为大家分享了JS实现留言板的具体代码，供大家参考，具体内容如下一、设计思路这个留言板有两个大的版块，一个是留言板（主要是发布留言的内容会在上面显示），另一个是发布留言（可以在这里输入你想要留言的内容等）。下图是留言版做成的样子：主要用到inputtextareabuttonimgdiv等；还用到了date对象的知识来获取时间，innerHTML来修改span中的内容。之后就是使用DOM的知识来实现这些功能。二、代码html<bodyοnlοa... 继续阅读 >
2020
09-24

javascript实现简单搜索功能

javascript实现简单搜索功能 本文实例为大家分享了javascript实现简单搜索功能的具体代码，供大家参考，具体内容如下<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>NewWebProject</title><style>table{width:500px;}td{border:1pxsolid#ccc;padding:5px;}</style><script>window.οnlοad=function(){varoTb=document.getElementById('tb');varoldColor=null;vartName=document.getEle... 继续阅读 >
2020
09-24

js中switch语句的学习笔记

switch语句用于基于不同条件执行不同动作。语法格式如下：switch(表达式){casen:代码块break;casen:代码块break;default:默认代码块}代码解释：计算一次switch表达式；把表达式的值与每个case的值进行对比；如果存在匹配，则执行关联代码。如下：switch(newDate().getDay()){case0:day="星期天";break;case1:day="星期一";break;case2:day="星期二";break;case3:day="... 继续阅读 >
2020
09-24

javascript+css实现进度条效果

javascript+css实现进度条效果 本文实例为大家分享了javascript+css实现进度条效果的具体代码，供大家参考，具体内容如下主要是以样式实现进度条的效果，JavaScript控制显示的百分比html模板<divclass="progress_area"><spanid="progress"class="progress_bac"></span></div><inputtype="button"class="progress-inp"value="100%"οnclick="progress(100);"/><inputtype="button"class="progress-inp"value="86%"οnclick="progress(86);"/><input... 继续阅读 >
2020
09-24

JS实现可控制的进度条

JS实现可控制的进度条 写在前面进度条一直以来都是很多地方都可以用的，那么很多的时候其实我们都是自己在网上找代码，直接使用的，很少有人自己写源码的，今天呢我们就简单的实现一个进度条的效果，没有做美化，喜欢做美化的可以自己做一下美化。源码已经放到Github上：进度条源码一如既往的看效果：好吧，效果还是一如既往的丑，简单的说一下怎么实现这样的效果，还是和之前一样我们分析一下难点在哪？第一：进度条是生成的，那么就意味着div的宽度是... 继续阅读 >
2020
09-24

js实现简单进度条效果

本文实例为大家分享了js实现简单进度条的具体代码，供大家参考，具体内容如下实现进度条需要三个部分：1、外部的大容器2、在增长的进度条3、显示进度条可视化的百分数运用js控制进度条的width便可实现;具体代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>div{width:500px;height:50px;position:relative;border:2pxsolid;margin:0auto;}aside{height:5... 继续阅读 >
2020
09-24

JavaScript实现简单进度条效果

JavaScript实现简单进度条效果 本文实例为大家分享了JavaScript实现进度条效果的具体代码，供大家参考，具体内容如下效果图：简单说一下思路：主要就是进度条的宽度的动态调整！要用到JS的间隔定时器setInterval()setInterval()功能：每隔指定时间调用一次函数参数：函数，时间间隔返回值：定时器编号（数字）想让它到一定的宽度就停止，那么需要设定它的最大宽度，在它外面套一个有宽度的元素就可以啦！这样的话控制它在父元素里的百分比就行了。在函数里进... 继续阅读 >
2020
09-24

js实现小时钟效果

js实现小时钟效果 本文实例为大家分享了js实现小时钟效果的具体代码，供大家参考，具体内容如下今天给大家分享一下制作小时钟先给大家把代码分享出来首先JavaScript代码<script>functionsetTime(){varnow=newDate();varyear=now.getFullYear();//获取现在的年份。varmouth=now.getMonth()+1;//获取本年的月份，默认的是0-11；所以进行加1操作；vardate=now.getDate();//获取日期，号varweek=now.getDay();//获... 继续阅读 >
2020
09-24

js实现消灭星星(web简易版)

昨天看视频之后，整理思路，自己完成了简易版消灭星星思路：模块1：初始化初始化总分数、当前分数、背景图、选择的星星分数初始化星星（生成二维数组，对二维数组的每一个对象设置样式（长、宽、背景图），生成二维数组个div元素节点插入到游戏面板中）模块2：预判判断： 鼠标移动到某一个方块，判断上下左右是否有连接着的小方块（采用递归方法），然后将其存储到数组choose[]，移到其他方块时，choose置为空闪烁：&#... 继续阅读 >
2020
09-24

JavaScript实现移动端带transition动画的轮播效果

JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎下面几个要点。即：1.确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。2.对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那么就会出现留白（如果你允许继续滑动的话，不过不允许滑动也没有啥意思了，除非你想来回轮播，这个我在另一... 继续阅读 >
2020
09-24

javascript实现滚动条效果

本文实例为大家分享了javascript实现滚动条效果的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>html,body{height:100%;margin:0;}#container{position:absolute;top:50px;left:100px;... 继续阅读 >
2020
09-24

js实现小星星游戏

js实现小星星游戏 本文实例为大家分享了js实现小星星游戏的具体代码，供大家参考，具体内容如下功能简介如图：实现一个点击游戏准备准备一个星星的图片（这里我重命名为xxx.png）开搞新建一个html文件，并将其与准备好的图片放在同一目录下（东西多了不建议这样搞，但这个就俩）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>小星星游戏</title></head><style>body{background-color:black;}meter{width:100%;}#tit... 继续阅读 >
2020
09-24

JS Array.from()将伪数组转换成数组的方法示例

Array.from方法用于将两类对象转换为真正的数组：1、类似数组的对象，可以理解为“伪数组”2、可遍历对象（比如字符串）什么是伪数组？伪数组都有一个基本的特点：必须有length属性。letarrayLike={"0":"a","1":"b","2":"c","length":3}像上面的arrayLike对象，有length属性，key也是有序序列。所以可以遍历，也可以查询长度。但却不能调用数组的方法。比如push、pop等方法。在ES6之前，还有一个常见的伪数... 继续阅读 >
2020
09-24

JS Array.from()将伪数组转换成数组的方法示例

Array.from方法用于将两类对象转换为真正的数组：1、类似数组的对象，可以理解为“伪数组”2、可遍历对象（比如字符串）什么是伪数组？伪数组都有一个基本的特点：必须有length属性。letarrayLike={"0":"a","1":"b","2":"c","length":3}像上面的arrayLike对象，有length属性，key也是有序序列。所以可以遍历，也可以查询长度。但却不能调用数组的方法。比如push、pop等方法。在ES6之前，还有一个常见的伪数... 继续阅读 >
2020
09-24

用JS实现选项卡

用JS实现选项卡 本文实例为大家分享了JS实现选项卡的具体代码，供大家参考，具体内容如下案例描述在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示默认的是数字1中的内容点击数字二点击其他数字依此类推，在这里就不一一展示了HTML代码全部HTML代码展示<divid="table"><!--头部--><divid="header"><ul><liclass=... 继续阅读 >
2020
09-24

JS+CSS实现3D切割轮播图

本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码，供大家参考，具体内容如下第一步：我们首先要通过CSS来完成一个基本布局，利用transform-style:preserve-3d设置成3D。下面是CSS部分的代码*{margin:0;padding:0;box-sizing:border-box;}li{list-style:none;}/*轮播图*/.homePage{width:800px;height:200px;margin:150pxauto;background-color:pink;position:relative;/*overflow:hidden;*/}... 继续阅读 >