原生js
关注
分享
扫一扫
以原生js讲解其用法
家里有蜘蛛
未来可期
展开
-
js-animate
/*@Author: Administrator@Date: 2019-12-18 15:52:13@Last Modified by: Administrator@Last Modified time: 2019-12-19 17:15:51*/function $(id){return document.getElementById(id);}function ge...原创 2019-12-19 18:18:48 · 343 阅读 · 0 评论 -
js实现弹幕发送
js发送实现弹幕使用原生js实现模拟简单弹幕效果，原理为每点击一次，input的内容生成一个span标签，生成的span的位置在右边框那里，高度时随机的，颜色也是随机的。这个里面实现的话，定时器不能只有一个，而是要给每一个span都开启一个新的定时器，这样才不会影响动画的执行。并且需要当弹幕出去的时候清除掉这个span。<!DOCTYPE html><html>...原创 2019-11-29 13:30:25 · 1518 阅读 · 0 评论 -
js模拟京东放大镜效果
js放大镜效果使用js实现放大镜效果的原理：这次将其中的一种方法，放大镜其实并不是鼠标放到一张图片的一个地方这张图就会自动放大，这个只是一种视觉效果，其原理时准备两张等比的图一张大图（放大后的图，鼠标放到小图上大图才会出现），一张小图默认鼠标放上去的图，鼠标在小图上移动，大图的对应位置也会移动，因此就出现了放大的效果。如图鼠标放入会出现一个黄色的透明盒子盒子区域会在右边显示出来放大效果。...原创 2019-11-28 23:28:52 · 466 阅读 · 1 评论 -
js动态修改表格数据
js动态修改表格数据使用js在白鸥个内进行动态修改，需要再点击每一个td的时候在每个td里动态的添加一个input文本框然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框和outline<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...原创 2019-11-28 18:16:32 · 6862 阅读 · 0 评论 -
使用原生js制作渐变轮播图
js制作渐变轮播图渐变轮播图和水平轮播图不同，水平的原理是改变水平的位置再overhidden 只显示中间的一张。可参考这个，点击进入而渐变轮播则是使所有图片都重叠到一起，使第一张的透明度为1，其他图片的opacity为0，改变的上一张的下一张的透明度实现切换图片，再在其中添加渐变透明的动画即可。下面的使js代码部分<script type="text/javascript">...原创 2019-08-27 21:14:50 · 816 阅读 · 1 评论 -
js循环精灵图
js循环精灵图循环精灵图可以不用在给每一个小块一 一的修改位置。左侧是一大张背景图 右侧是成品是预览图这个背景图的位置其实是有规律的，每两张之间间隔一个固定长度，这个固定长度刚好等于一个小图标的长度，我们使用的这个图间隔44px。 <script type="text/javascript"> var lis = document.querySelectorAll...原创 2019-08-23 09:45:24 · 4246 阅读 · 6 评论 -
js小游戏 （飞行的小鸟--canvas）
js小游戏 （飞行的小鸟）这个里面用到的主要是 canvas 绘图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { backgrou...原创 2019-08-22 08:24:04 · 1685 阅读 · 3 评论 -
js中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
js中"Uncaught TypeError: Cannot set property ‘innerHTML’ of null"错误这是属于一个常见的错误<script type="text/javascript"> document.getElementById("timer").innerHTML = "adasd";</script><body&g...原创 2019-08-20 17:22:23 · 16232 阅读 · 4 评论 -
在使用s创建一个可以随鼠标移动的盒子（onmousemove）（一）
在使用s创建一个可以随鼠标移动的盒子这个方法同样是使用下x,y的坐标坐标的使用方法的解释可以参考我发布的上一篇 关于坐标的使用可以随着鼠标移动想要成功应用的话必须给盒子加一个定位<script type="text/javascript"> window.onload = function(){ var box = document.getElementById...原创 2019-05-23 22:53:27 · 346 阅读 · 0 评论 -
使用js制作简易轮播图 （图片切换）
使用js制作简易轮播图 （图片切换）此方法在实际应用中用处不大 了解即可**主要思想为把每一个图片的路径存到一个数组中获取按钮的id， 为该按钮绑定单机响应函数即可以下为js代码<script type="text/javascript"> window.onload= function(){ var prev = document.getEle...原创 2019-05-20 21:18:59 · 8645 阅读 · 2 评论 -
在js中获取css样式方法及不同浏览器兼容问题
在js中获取css样式的方法一、使用currentStyle使用方法为 currentStyle . 样式名例如alert(box.currentStyle.height); 但是该方法有一个缺陷只能在IE中使用二、使用getComputedStyle使用方法为 getComputedStyle( , )getComputedStyle( , )里面有两个值第一个为所获取的元...原创 2019-05-22 13:20:23 · 1543 阅读 · 0 评论 -
在js中设置用户必须阅读完某项协议 才能勾选登陆或注册 （disabled的使用技巧）
在js中设置用户必须阅读完某项协议 才能勾选登陆或注册 （disabled的使用技巧）在这里插入图片描述仔细观看两张图片画圈部分是不一样的当滚轮在上面时下面的表单是不可选中的第二张在底部表单是可选中的其中方法为为监听这个滚轮当滚轮到达底部时 表单变为可选中状态info.scrollHeight - info.scrollTop == info.clientHeight //判断滚条是...原创 2019-05-22 22:31:33 · 8564 阅读 · 1 评论 -
js中的事件对象event （获取元素的,x,y坐标）
event的使用 获取元素的,x,y坐标如图所示当鼠标放在上面那个框上时获取其坐标，并且在下面框中显示其实需要使用到鼠标移动事件 onmousemoveevent 事件对象中封装了当前事项相关的一切属性 如鼠标的坐标键盘的按键<script type="text/javascript"> window.onload = function(){ var bi...原创 2019-05-23 10:32:18 · 8436 阅读 · 0 评论 -
使用js创建一个可以随鼠标移动的盒子（二）
使用js创建一个可以随鼠标移动的盒子（二）此文章是在上一篇的基础上写的 主要是为了解决 在不同浏览器的兼容问题由于pageX和pageY不兼容IE8所以就不采用这个方法了当滚轮不在顶端时使用clientX和clientY时鼠标和盒子移动会出现问题如图下面会有一段空白不会到底，可以发现这个高度其实是和 滚轮到顶端的高度是一样的因此就可以通过计算来实现这个兼容问题<script...原创 2019-05-23 23:12:24 · 770 阅读 · 0 评论 -
使用js拖拽盒子移动（）
使用js拖拽盒子移动所用到的方法有onmousemove , onmouseup , onmousedown按下鼠标开始拖拽，松下及停止此方法用函数实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标事件</title> &...原创 2019-05-25 21:50:27 · 1399 阅读 · 0 评论 -
js中的滚轮事件（制作一个随滚轮滚动的盒子）
js中的滚轮事件（制作一个随滚轮滚动的盒子）使用onmousewheel随鼠标的滚动改变大小<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{...原创 2019-05-26 21:35:19 · 1404 阅读 · 0 评论 -
js中的键盘事件和一些应用
js中的键盘事件 和一些简单应用onkeydown, onkeyup键盘事件一般都是对可获得焦点的对象 例如input下面是一些应用一、 在文本框中只能输入非数字的元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g...原创 2019-05-27 21:40:38 · 1021 阅读 · 0 评论 -
使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题）
使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题）首先先做好界面部分 使所有的图片浮动到一行中， 然后overflow：hidden; 清除溢出需要动的部分需要添加定位用户看到的轮播效果就是 改变图片的偏移量，使其滚动，添加定时器使其自动播放<!DOCTYPE html><html> <head> <meta charset...原创 2019-06-04 17:47:11 · 13120 阅读 · 1 评论