原生JS 实现点击按钮创建元素
要求: 点击按钮，随机生成一个20px-100px宽度正方形，随机颜色，随机位置，不能出可视区域外 思路：（1）创建按钮，为按钮添加事件侦听（2）触发事件...
原生js自动触发onclick事件
废话少说，直接上代码！<div id="btn" οnclick="tip(\'弹窗\')">触发onclick</div> <scr...
原生js简单调用百度翻译API实现的翻译工具
先来个在线demo:js翻译工具或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现)或者直接前往该网址:js翻译工具或者前往我的github:github(eveningwater,觉得不错希望点个star(谢谢))下载源码在说之前,先友情提示一下,由于...
原生js实现一个自定义下拉单选选择框
原生js自定义的下拉选择框 浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，UI一般给的下拉框也是和原生的...
原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）
想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者更好的建议，请大家评论，一同探讨，好了废话不多说，下面开始干活了！首先，说一下我想实现的基本功能：此方...
ajax(原生js)创建 应用场景详解
ajax(原生js)创建 应用场景详解 ajax应用场景:图解:说明：当需要使用JavaScript 和 服务器进行交互时，需要通过JavaScript的一个对象XMLHttpRequest对象，将请求发送过去.场景：注册用户时，用户名输入完毕，需要去服务器查询一下该用户名是否存在.场景：当在输入框...
原生JS实现弹幕效果
纯属无聊写的，可能有很多问题，欢迎批评指教。 效果图：图一是预设的一些弹幕，图二是自己发射的弹幕，效果是一样的。demo地址 首先是弹幕的位...
原生JS和jQuery版实现文件上传功能
<!doctype html><html lang="zh"><head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <scrip...
原生JS版和jQuery 版实现文件上传功能
<!doctype html><html lang="zh"><head><meta charset="utf-8"><title>HTML5 Ajax Uploader</title><script src="jquer...
JS表单原生验证器
一、前言最近在开发一个新项目，需要做登陆等一系列的表单提交页面。在经过“缜密”的讨论后,我们决定 不用外部流行的框架，如bootstrap，由于我负责的模块仅仅是其中的一部分，因此少数服从多数，无奈只能抛弃bootstrap等提供的布局，样式以及验证等一些列如此方便的组件，（他们拒绝使用的原因也令人...
原生js中stopPropagation,preventDefault,return false的区别
1、stopPropagation:阻止事件的冒泡，但不阻止事件的默认行为。最好莫过于用例子说明：<div id='div' onclick='alert("div");'> <ul onclick='alert("ul");'> <li id=...
用原生js来写一个swiper滑块插件
是不是有点印象了，没错，他的最基本的用法就是左右滑动，插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果，不过你完全可以组合各种元素来适应不同的场景。当然插件我已经写好了，咱先看下这个插件是怎么来用的，对插件有一个大概了解，一会写起来不至于太懵逼。。。插件地址：https://git...
原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是：按下鼠标并移动——拖拽移动物体，抬起鼠标——停止移动。主要触发三个事件：onmousedown、onmousemove以及onmouseup；首先搭建结构：一个宽350px、高200px的登录框<div id="login"> <div id="bo...
原生js简单调用百度翻译API实现的翻译工具
先来个在线demo:js翻译工具或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现)或者直接前往该网址:js翻译工具或者前往我的github:github(eveningwater,觉得不错希望点个star(谢谢))下载源码在说之前,先友情提示一下,由于...
js原生倒计时
倒计时是2019年6月7号10点开始的代码粘贴过去直接运行即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...
原生JS实现Ajax的跨域请求
原生JS如何实现Ajax的跨域请求？在解决这个问题之前，我们务必先清楚为什么我们要跨域请求，以及在什么情况下会跨域请求。了解一下：“同源策略”，你就知道了；同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的定义是：一段脚本向后台请...
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform，实现3d立方体的旋转通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transfor...
原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测
<style> body{overflow-x: hidden;width:80%;margin:auto;} body:after { content: "."; clear: both; display...
原生js，jquery通过ajax获得后台json数据动态新增页面元素
一、原生js通过ajax获取json数据因为IE浏览器对ajax对象的创建和其他浏览器不同，为了兼容全部浏览器，我用下面的代码：function createXMLHttpRequest(){ try{ XMLHttpReq = new ActiveXObject...
es6继承 vs js原生继承(es5)
最近在看es2015的一些语法，最实用的应该就是继承这个新特性了。比如下面的代码： $(function(){ class Father{ constructor(name, age){ this.name = name; ...