【原生JS】进阶最后一个编程篇（与之前的选项卡不同的做法）

完成效果图: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{;;} div{width:260px; height:100px; padding-top:1…

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var defaultPra = { mainMenuId: "ArcMenu",//主菜单id menuBoxId:"menuBox",//菜单包裹id position: "",//弧形菜单 customPosition:"0,0",/…

用原生js来写一个swiper滑块插件

是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱先看下这个插件是怎么来用的,对插件有一个大概了解,一会写起来不至于太懵逼... 插件地址:https://github.com/laravuel/swiper.git demo目录有演示和用法,不过插件我用了webpack和babel转码,可以不用管,直接看src/swiper.js即可. <!--…

用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笨鸟先生</title> <style> *{margin: ;padding:;…

用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这…

原生JS代码实现一个Ajax异步请求

异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject. var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Micros…

原生js怎么删除一个 div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

关于如何利用原生js动态给一个空对象添加属性以及属性值

首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候更不好办.这时候,方括号获取法就派上用场了.下面,来看一个例子,就一目了然了. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l…

原生js写的一个当前年份日期星期和时间的显示

话不多说,所有代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>当前时间显示 </title> </head> <body onload="startTime()"> <d…

原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方法. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g…

原生js写的一个简单slider

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,div,ul,li { margin: 0; padding: 0; } ul,li { list-style: none; } a…

原生js实现的一个随机颜色的简单效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> table{ width:100%; /* border:…

使用『jQuery』『原生js』制作一个选项卡盒子 —— { }

效果 HTML 部分 <body> <div id="main-box"> <div id="left-nav"></div> <div id="right-nav"></div> <div id="scroll-box"> <div class="current-box"> <p> Lorem ip…

使用『jQuery』『原生js』制作一个导航栏动效 —— { }

效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="nav2">导航2</div> <div id="nav3">导航3</div> <span id="underscore"></span> </nav> </body>…

一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习这是html结构 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="game"> <div id="b…

使用原生JS封装一个动画函数

最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一个动画,看了一下以前封装的函数,千疮百孔,又进行了重新封装,先上代码,有详细的备注. function animate(el, target, step, dtime) { /** * 参数说明: * - el 表示操作的元素对象 * - target 表示移动的目标距离单位 px * - ste…

原生js写一个无缝轮播图插件(支持vue)

轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件.在轮播图部分,本来在vue里面写了一下,但是发现总是出现bug,所以后来准备封装一个插件来实现. 其次的一个原因是,以为这一学期学vue一直在用vue,发现自己以前学的原生js有点遗忘,所以想借这个机会再次复习一下js. 功能&介绍没有引用第三方插件库,原生js,封装一个Broadca…

用原生JS从零到一实现Redux架构

前言最近利用业余时间阅读了胡子大哈写的<React小书>,从基本的原理讲解了React,Redux等等受益颇丰.眼过千遍不如手写一遍,跟着作者的思路以及参考代码可以实现基本的Demo,下面根据自己的理解和参考一些资料,用原生JS从零开始实现一个Redux架构. 一.Redux基本概念经常用React开发的朋友可能很熟悉Redux,React-Redux,这里告诉大家的是,Redux和React-Redux并不是一个东西,Redux是一种架构模式,2015年,Redux出现,将 Flux 与…

.NET中的FileUpload控件的使用-原生JS(二)

本篇使用原生JS进行数据传输,使用FileUpload控件上传文件,适配IE. HTML <div class="container"> <div class="row"> <input type="file" formenctype="multipart/form-data" id="files" multiple name="files" />&l…

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.…