React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 前几天写的那个拖拽，自己留下的疑问。。。这次在热心博友的提示下又修...
本文实例为大家分享了js实现一个简单的日历控件，供大家参考，具体内容如下 效果图：具体代码：date*{ margin:0; padding:0;}a{ text-decoration:none; outline:none;}body a{outline:none;blr:expression(this.onFocus=this.blur());}img{ border:none;}ul{ list-style:none;}body{ color:#666666; font-size:14px; font-family:"微软雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}/*html{...
最近有提关于下拉选项过多的时候，希望输入关键词，可以搜索内容的需求，但是之前项目太赶，所以也就没有来得及做，因为希望用原生js写一些内容，所以插件是采用了原生js写的思路如下 第一步：fnInit实现初始化一些字段 第二步：加载搜索框的div 第三步：实现search功能，删除原节点并加载新节点 第四步：点击或者回车的时候设置value 代码： autoComplete.js/** * @summary AutoComplete * @description 输入框自动检索下拉选项...
百叶窗大家都见过吧！如图:原理: 如图所示，空心格子就好比是每个li，给它设定相对定位属性，设置overflow:hidden；黑块为li子元素，高度为li的2倍，设置absolute属性，我们正是要改变它的top值从而获得变化！(右上角多余块与本图无关)布局分析： 注意top值得变化！默认top=0时候，显示的“一楼上铺”，当top=-40px时候，li的子元素 上移40px，这时候显示的内容就为“一楼下铺”注意p元素的包裹层divJS分析： 1、要开多个定时器来达...
在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生js的东西，根据自己的思路做插件，这样能提高水平。 说到autotemplete，好多人都用过，引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项，类似于百度搜索框那种提示功能...
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子，供大家参考，具体内容如下HTML5 Ajax Uploader/*原生JS版*/ document.getElementById("upJS").onclick = function() {/* FormData 是表单数据类 */var fd = new FormData();var ajax = new XMLHttpRequest();fd.append("upload", 1);/* 把文件添加到表单里 */fd.append("upfile", document.getElementById("upfile").files[0]);ajax.open("post", "test.php", true);aja...
本人自己写过三个图片轮播，一个是简单的原生JS实现的，没有什么动画效果的，一个是结合JQuery实现的，淡入淡出切换的。现在想做一个酷一点的放在博客或者个人网站，到时候可以展示自己的作品。逛了一下慕课网，发现有个旋转木马的jquery插件课程，有点酷酷的，于是就想着用原生JS封装出来。做起来才发现，没有自己想象中的那么容易。。。不啰嗦了，讲解一下实现过程吧。 二、效果 由于自己的服务器还没弄好。在线演示不了（ORZ......
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定...
已知BUG: Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug. 查看演示: 点此查看DEMO 核心代码: 代码如下: //原生JavaScript版本 window.onload=function(){ var js=document.getElementById(js);//获取文本域 var info=document.getElementsByTagName(p)[0];//获取要插入提示信息的元素 var submit=info.getElementsByTagName(input)[0];//获取提交按钮 var max=js.getAttribute(maxlength)...
建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角.实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件. 相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交. Js核心代码点此查看样例 代...
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原...
相信本菜单会让你学习到一些新鲜的JS技巧。 JS仿苹果任务栏菜单 body{margin:0;padding:0} #menu{position:absolute;width:100%;bottom:0;text-align:center;} window.onload = function () { var oMenu = document.getElementById("menu"); var aImg = oMenu.getElementsByTagName("img"); var aWidth = []; var i = 0; for (i = 0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
html代码： 代码如下: #container { margin:0 auto; margin-top:10%; width:200px; } #timer { border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color:green; } input { width:87px; } js代码： 代码如下: /* *@author:hyjiacan *date:15:57 2010-9-5 *name:timer */ var ctrl = document.getElementById("ctrl"); //控制按钮对象 var timer = document.getElementById("t...
我的大体思路是：时时监听鼠标的坐标，当鼠标移动时，透明层随着鼠标移动，大图片相对透明层的移动而移动。不废话了，看代码。 代码如下: 放大镜 /*重置{*/ html{color:#000;background:#fff;} body,div{padding:0;margin:0;} img{border:none;} /*}重置*/ .outer{width:200px;height:150px;position:relative;margin:20px auto;} .inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:al...
文中图片地址已经失效，但代码功能都存在，大家注意替换下 实例索引 body{margin:0px;padding:0px;font-size:12px;font-family:Verdana, "微软雅黑";background:#2d3033;} img{border:0;} a{outline:none;} #box{width:918px;height:745px;margin:20px auto;border:5px solid #4b5258;background:#fff;padding:1px;position:relative;} #box .kuang{width:918px;height:745px;float:left; background:#eaeaea;position:relativ...