javascript&&jquery
文章平均质量分 59
u011263845
一个热爱前端但不愤怒的前端工程师。
展开
-
javascript结合canvas标签做出来的时钟效果
代码如下:body{background: purple;}var clock=document.getElementById("liuzhe");var cxt=clock.getContext("2d"); function drawclock(){ //清除画布 cxt.clearRect(0,0,500,原创 2015-04-10 16:32:40 · 559 阅读 · 0 评论 -
Javascript之创建对象(工厂模式与构造函数模式)
虽然Object构造函数或对象字面量都可以创建单个对象,但是这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码。为了解决这个问题,就可以使用工厂模式来创建对象。1、工厂模式 在ECMAScript中是无法创建类的,开发人员就发明了一种函数,用函数来封装特定接口创建对象的细节。function createPerson(name, age, job) { var原创 2015-06-27 18:34:52 · 904 阅读 · 0 评论 -
网页加载进度条中的javascript
demo地址:http://output.jsbin.com/buquyedosa思路如下:代码都有注释,就不一一介绍了。<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>进度条</title><style> .progress{ position: fixed;原创 2015-06-12 10:34:12 · 1393 阅读 · 0 评论 -
无聊玩闭包
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <script> va原创 2015-07-31 10:02:52 · 485 阅读 · 0 评论 -
可动态切换日历demo
demo地址:http://codepen.io/tianzi77/pen/vOQbPY看别人的demo.自己也尝试写了一下;小日历。结构: <div id="calendar" name="calendar"> <ul> <li class="current"><strong>1</strong>JAN</li> <li cla原创 2015-07-30 19:10:52 · 1054 阅读 · 0 评论 -
简单的数组求和
demo:http://codepen.io/tianzi77/pen/YXdXjb<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { color: #999; f原创 2015-07-31 17:16:53 · 1005 阅读 · 0 评论 -
禁止右键js
document.oncontextmenu = function (){ return false}原创 2015-08-04 14:24:44 · 434 阅读 · 0 评论 -
js快速排序
快速排序(Quicksort)是对冒泡排序的一种改进,是一种分而治之算法归并排序的风格核心的思想就是通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列理论上的步骤:找到一个“支点”项目在数组中,可以是中心点,基准 在阵列中的第一项开始指针(左指针)。原创 2015-08-31 16:57:37 · 774 阅读 · 0 评论 -
表格js插件highcharts
中文官网:http://www.hcharts.cndemo:http://www.hcharts.cn/demo/index.php?p=27确实很方便。另外 var arr=[{ "endCount": 12, "hour": 0, "minutes": 0, "week": 0},{ "endCount": 2, "hour": 0, "minutes"原创 2015-08-03 19:04:18 · 584 阅读 · 0 评论 -
javascript的简单逻辑题目
ps:纯属练习逻辑,项目开发中实际用处不大,老鸟飘过。题目1:求一个数组的最大ji数和最小偶数,并返回他们的和,如果一个数不存在则返回null。方法1: function evenOdd(arr){ var even=[],// 偶数 odd=[];//基数 for(var i=0;i<arr.length;i++) i原创 2015-08-17 21:31:02 · 3160 阅读 · 0 评论 -
微博发布框的jquery
<style type="text/css">textarea{ width: 300px; height: 300px; border: solid 1px #abcdef;}strong{ color: red;}</style></head><body><textarea></textarea><p>你还可以输入<strong>140</str原创 2015-05-26 10:35:02 · 1257 阅读 · 2 评论 -
无限滚动js
封装成一个jq插件:(function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults,原创 2015-09-22 16:48:57 · 866 阅读 · 1 评论 -
手风琴切换的效果
2016第一遍文字,写写这玩意玩一下demo: http://codepen.io/tianzi77/full/eJoaww 代码都不想上了,里面都有。更多是样式的细节与宽度的计算。还有一些动画切换的效果。收笔下班。哈哈哈原创 2016-02-18 18:45:21 · 423 阅读 · 0 评论 -
网页底部固定的两种方式
小小的需求,不管内容页面的多少。始终要底部固定在页面窗口的底部。 实现方法两种,道理简简单单,公司的电脑妈的一打开github就死机。真是无力吐槽了。。。方法一: 判断高度$(function() { footerAuto(); }) function footerAuto() { var _wh = $(window).height();原创 2016-04-27 15:40:39 · 983 阅读 · 0 评论 -
团购以及活动倒计时简单实现
淘宝美团一些网站上面经常搞什么活动倒计时。看到了自己也玩一下吧。实现方法都一样,无非就是后台传值过来活动结束的时间,然后减去当前的时间进行动态插入时间节点。html:<div class="box" end-time="1463500799" start-time="1463381269"> 距离活动结束还有<span id="time"></span> </div>js动态原创 2016-05-16 18:30:14 · 1922 阅读 · 0 评论 -
滑动的导航,背景图片或者边框滑动效果
滑动都是一个道理。 主要就是根据当前滑块的位置计算出要移动的距离。 可能也算一个小小的算法把 我觉得这是核心。function setSlider(i) { $(slider).width(array_w[i]); $(slider).stop(true, true).animate({ '原创 2016-05-05 18:46:45 · 438 阅读 · 0 评论 -
纯CSS下拉导航和jquery下拉导航对比
纯css实现的下拉导航demo:http://codepen.io/tianzi77/pen/xGOyxp 不用javascript以及jquery动态效果实现导航条的下拉效果。纯css属性实现,主要应用到绝对定位中的left:auto和left:-9999px;来隐藏或者鼠标经过的时候显示下拉菜单。 htm结构:<ul class="nav"> <li><a href="/">小哲</原创 2015-05-19 16:15:03 · 672 阅读 · 0 评论 -
jquery实例demo1
<!doctype html><!--jq109--><html></body></html><head><meta charset="utf-8"><title>tianzi code</title><script type="text/javascript" src="jquery-2.1.3.min.js"></script><script type="text/javas原创 2015-05-19 21:48:37 · 1046 阅读 · 0 评论 -
利用css和javascript制作的幻灯片效果
幻灯片demo:http://codepen.io/tianzi77/pen/aOoJVO下面是代码:Examplesbody,div,ul,li{ margin:0;padding:0;}ul{ list-style-type:none;}#box{ position:relative;原创 2015-04-18 13:15:25 · 698 阅读 · 0 评论 -
正则表达式匹配邮箱规则
筛选出有邮箱的li项;用正则表达式以及exec()函数进行匹配。详细代码如下Examplesul{border: 1px dotted black;background: green;border-radius: 10px;width: 400px;height: 200px;}li{原创 2015-04-12 17:47:54 · 1222 阅读 · 0 评论 -
jQuery基础 第二课 jQuery动画 jQuery事件
本节课的主要内容为:jQuery 事件jQuery 动画jQuery 事件在原生 JS 中,我们绑定事件大体可以通过两种方式:修改 on事件名 这个 DOM 属性通过类似 addEventListener 的 DOM 方法var ele = document.getElementById('eleId');ele.onclick = function () {原创 2015-04-14 15:59:01 · 357 阅读 · 0 评论 -
写给女友的JS教程—之JS闭包
女朋友”胖子”正在学JS, 到闭包这一块遇到了一些障碍.我在网上帮她找了一些文章,但又写的又枯燥又长,我来写一篇简单点的吧.从一次穿越说起—–有姐妹俩,大桃花和小桃花相继出生,有一次小桃花在河边洗衣服,出现奇特星像–十字连珠,小桃花穿越到了清朝.还进宫见到了四阿哥,身边有一群宫女,和小桃花妹相称.四阿哥问:”小桃花,你的姐姐是谁?”小桃花怎么转载 2015-04-13 22:58:04 · 683 阅读 · 0 评论 -
函数调用以及document.write()练习
javascript中,函数可以传递一个实参 形参,还可以在函数里面调用传递函数,成为回掉函数。document.write()创建表格做成一个函数的练习。Examples var liuzhe=function(row,col,width,color){document.write('');for(var i=0;iif(i%原创 2015-04-14 15:53:55 · 816 阅读 · 0 评论 -
自己常见的一些JavaScript兼容总结
1、document.formName.item(“itemName”) 问题 说明:IE下,可以使用document.formName.item(“itemName”)或document.formName.elements[“elementName”]; Firefox下,只能使用document.formName.elements[“elementName”]。 解决方法:统一使用docu原创 2015-04-20 20:03:30 · 9516 阅读 · 1 评论 -
javascript中的this与继承分析
拷贝式的继承这种继承方式简单的说就是通过复制的方式将父类中的内容拷贝到子类中,从而实现了继承。关于 this之前课中我们讲构造函数时提到了 this ,当时并没有讲的太清楚究竟它是什么,因为其实它的取值是根据情况的不同而会发生变化的。所以这节课我们花点时间来聊聊浏览器环境中的它。全局 this在浏览器中全局环境下的 this 即为 window 对象。大家可以执行以下代码来进行原创 2015-04-15 21:56:29 · 465 阅读 · 0 评论 -
jQuery 事件,jQuery util,jQuery core
jQuery 事件 2上节课我们讲了很多 jQuery 里的事件,这里再补充几个和加载流程相关的事件。loadunloadreadyholdReadyload该事件在绑定的节点以及它的子节点加载完成后触发。可以绑定在各种节点上,例如但不仅限于这些:imagesscriptsframesiframeswindow使用方法和其他事件并无区别:$ele.on('loa原创 2015-04-16 16:13:21 · 938 阅读 · 0 评论 -
用css3或者jquery实现切换按钮效果
switch demo地址:http://codepen.io/tianzi77/pen/VLLBmQ整理思路:这个 DEMO 的功能大致就是模拟开关效果,用于增强原生的 checkbox。视觉效果大致是一个白色的方块左右移动,这里我们最直接的可以想到这种实现:左边一个蓝色方块,中间一个白色方块,右边一个灰色方块,三者宽度调整宽度和位置来完成动画这么来看,我们需要控制的元素有3个,并且我们仔细观察原创 2015-05-02 12:42:57 · 2609 阅读 · 0 评论 -
原生javascript基础知识点(2)复习与回顾
常用对象上节课有提到引用对象,并大致的讲了一下。这里再选取其中3种稍微详细的讲一下。Object对象,其内容形式为键值对,主要用来存储和封装。创建对象创建一个对象有两种常见方式,通过对象字面量 {} 或者 new 操作符。如下:var obj = {};var obj2 = new Object();对象内容的键值对中,值可以是各种类型的数据,如:var obj = { key1: 's原创 2015-05-08 15:16:42 · 668 阅读 · 0 评论 -
从一个简单例子谈谈js的捕获与冒泡问题
事件冒泡与事件捕获,下面是js中捕获与冒泡的一个实例: html结构:<div id="tianzi"> <div id="tianzi1"> <div id="tianzi2"> <div id="tianzi3"> </div> </div> </div></div>css样式控制:#tianzi{原创 2015-05-11 16:39:09 · 1325 阅读 · 0 评论 -
jquery滚动公告demo
实现公告栏目循环的滚动效果,直接放代码:<!doctype html><!--jq110--><html></body></html><head><meta charset="utf-8"><title>tianzi code</title><script type="text/javascript" src="jquery-2.1.3.min.js"></script><scr原创 2015-05-20 21:11:56 · 2492 阅读 · 1 评论 -
javascript滑动门的实现方法和案例
首先我们知道js滑动门的三种实现思路: -自定义方法 -闭包 -自定义属性 那么写个列子分析一下各自的好坏。demo地址:http://codepen.io/tianzi77/pen/jPMPeB html结构:<div id="content"> <div id="tabs"> <ul> <l原创 2015-05-20 21:44:48 · 1889 阅读 · 0 评论 -
jquery强大的选择器和javascript 的对比。
案列demo:http://codepen.io/tianzi77/pen/yNJVaM 首先写结构:<body><ul id="nav"> <li class="current">tianzi</li> <li>tianzi</li> <li>tianzi</li></ul><div id="content"><div class="show">content区域原创 2015-05-17 17:50:32 · 856 阅读 · 0 评论 -
Javascript中的原型继承详解
js中的继承,是面向对象的知识,因为js没有类的概念,所以继承是通过对象实现的,谈到继承,就必须说到prototype,就不得不先说下new的过程。 一个小小的列子:<script type="text/javascript"> var Person = function () { }; var p = new Person(); </script>我们来原创 2015-06-03 19:23:15 · 831 阅读 · 0 评论 -
js模拟网页进度加载。
这个小玩意用于h5上的模拟加载还是可以,就是打开的时候模拟正在加载。但是实际项目中并不一定准确。因为并没有真实请求,慎用!#p{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;原创 2016-07-19 18:11:06 · 736 阅读 · 0 评论