jS主题的文章列表，还有jS的技术要点_第23页

原生js的正负值处理以及添加回调函数

今天还是来说昨天的小例子，昨天实现的效果就是点击按钮“向前”即往前相反则往后，那么需要细化的几个问题就是：代码可以简化以及可以用一个变量来控制方向直接来看js：<script>//兼容不同浏览器获取行间样式functiongetStyle(obj,attr){returnobj.currentStyle?o...

代码星球·2021-02-20

原生js应用setTimeout实现下拉菜单

今天实现一个很简单的下拉菜单的小实例，也就是鼠标移入菜单，它的子菜单出现并延迟消失。大概效果如下图：来看下布局：<divclass="menu"id="menu">主菜单</div><ulclass="mList"id="mList"><li>下拉菜单一</li&g...

代码星球·2021-02-20

原生js实现全选和反选以及任意一个未被选中的效果

模仿一个百度音乐的全选和反选的的操作。html代码如下：<divclass="box"><ulid="lists"><li><inputtype="checkbox"value=""><span>我爱你中国</span></li><...

代码星球·2021-02-20

原生js实现星级评分

今天来实现下星级评分，后边并跟有评价文字。html代码如下：<spanclass="star"><bclass="ct-staric-star-off"></b><bclass="ct-staric-star-off"></b><bclass="ct-s...

代码星球·2021-02-20

原生js将秒转为时间

关于运算符的应用，取模应该是比较重要的了，今天写一个关于将秒转为时分秒的小例子。<span>11679</span>s是多少分钟<p></p>上面的p标签用来储存转化出来的时间，js应该这样写：window.onload=function(){varoTs=documen...

代码星球·2021-02-20

原生js解决选项卡里套选项卡的问题

今天来看一个稍微复杂的例子，选项卡里套选项卡，先来看看布局：<divid="box"><divid="tabl"class="tabL"><ahref="javascript:void(0)">模块1</a><ahref="javascript:void(0)"&g...

代码星球·2021-02-20

原生js修改文本内容

关于修改文本的内容，有好多不同的写法，今天实现一个简单的的案例就是点击“编辑”按钮，文本内容可以保存。看下图：这个例子想要实现的效果就是点击编辑，出现文本框，然后可以更改内容，关键就是在实际项目中可能会遇到有多行这样的内容，那么现在就只能用到传参来解决了，只要实现一个剩下的就都好说了，来看看代码：<ulid="l...

代码星球·2021-02-20

原生js计算价格并合计总价

在昨天的案例的基础上，若是想要计算总价，那么就要把每一个li的小计都要加一遍，所有要循环每个li，并且要获取到每个li里的小计的值。要计算出商品的总件数，然后还有总计带的价格，那么js应该这样写：<script>window.onload=function(){varoUl=document.getElem...

代码星球·2021-02-20

原生JS计算商品价格

通常购物网站中会有一些价格计算，合计或者小计，今天写一个简单的计算商品价格的小例子：先来看看布局：<body><ulid="lists"><li><inputtype="button"value="-"><b>0</b><inputtype=...

代码星球·2021-02-20

JS函数传参实例应用：多组图片切换实例

之前的博客有一个图片切换的例子，实现了简单轮播图的点击切换的案例，今天就说一下多组轮播切换，前提是布局差不多，通过函数传参的形式减少代码应用，但是同时还能实现效果。先来看一下之前那个例子的实现图片：那么今天我来实现两组这样的图片切换，通过传参数来实现，这样分可以减少js代码：<divclass="box"id="...

代码星球·2021-02-20

js中的数据类型转换（找相应的值小案例）

js中数据类型转换是一个很频繁会用到的一部分，那么在实际案例中会出现各种的数据类型，想要满足某些条件，那还必须要不同类型的数据进行转换，今天就通过一个小例子，来找出相对应的数据类型。先看一个一个数组，数组里的内容很复杂，包含了所有的数据类型，然后我们通过不同的条件找到相对应的内容：vararr=['100px','ab...

代码星球·2021-02-20

JS判断qq号码

关于判断表单元素中QQ号码的既定的几个标准：1、不能为空2、不能不是数字3、不能有0在前面4、不能是小数5、输入的数字必须在5位以上、10位以内（先判断10位以下的，目前存在11位和12位的忽略不计）先来简单写一下布局：1请输入QQ号码：<inputtype="text"/>2<inputtype="...

代码星球·2021-02-20

js中的数据类型转换

js中数据类型转换是很重要的一部分，通过一些数据类型转换可以达到想要的结果，那么数据类型转换最基础的几个方法是什么呢，来看看我的简单的总结：1<script>2一、Number()3vara='+100';4//alert(a+100);//'100100'5//alert(Number(a));//100...

代码星球·2021-02-20

原生js解决简单轮播图的切换

之前写过过一种轮播图的切换，是按照顺序依次点击依次更换图片，这次的图片切换主要是可以有点类似京东的轮播图，区别不同的是没有加定时器，不能自己循环，而需要点击任何一个下标，显示当前所对应的图片。先来看看布局html和css：1<divid="pic">2<imgsrc=""/>3<span&...

代码星球·2021-02-20

js获取自身递增及匹配数组内容

上篇博客是每个li里只有仅仅一个div去更改其颜色，但是若是我们遇到每个li里有多个及不同数量的div，而每个div要匹配数组里的颜色，并且依次递增循环，那么就要用到for循环以及清楚了解this指向当前元素是哪一个然后再给其匹配数组中的颜色。这些话有点绕口，那我们来看代码，先来看看布局：1<style>2...

代码星球·2021-02-20