JavaScript
七上八下的爆米花
无
展开
-
canvas画布实现钟表的绘制,并时刻显示时间,canvas画圆,
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> #cv{ box-shadow:5px 5px 5px gra原创 2018-08-24 20:33:20 · 1862 阅读 · 0 评论 -
JS之用jquery编写将页面中div拖动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } di原创 2018-08-03 09:10:02 · 205 阅读 · 0 评论 -
包装对象
var s='this is a string';alert(s.length);//16alert(s.indexOf('is'));//2值类型不是对象类型,但是也可以拥有属性和方法,当运行时,JS会隐式为相应代码添加对象,这种行为叫做包装对象 实例代码:var str = 'hello';//此刻str为string基本类型,也不是一个对象str.number=1...原创 2018-08-14 21:07:34 · 723 阅读 · 0 评论 -
JS基础之AJAX基本知识点以及使用步骤与JSON的配合
AJAX = (Asynchronous JavaScript and XML异步的 JavaScript 和 XML)AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX是一种无需加载整个网页,可以对网页的某部分进行更新,称之为与服务器交换数据的艺术核心与基础就是XMLHttpRequest对象,存在兼容问题,当前所有主流浏览器都支持,但是在IE56上不支持,在IE56...原创 2018-08-02 10:00:28 · 212 阅读 · 0 评论 -
JS基础练习之选择判断
一、选择题1. 下列js可以让一个input的背景颜色变成红色的是?A. inputElement.style.backgroundColor = 'red';B. inputElement.backgroundColor = 'red';C. inputElement.style.backgroundColor = '#000000';D. inputElement.bac...原创 2018-08-10 15:11:32 · 4940 阅读 · 0 评论 -
jquery完成一个电商网站的放大镜效果以及原理
鼠标拖动遮盖运动,右边大图随之移动,类似于淘宝中的放大镜效果<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style>原创 2018-08-06 09:35:51 · 1176 阅读 · 0 评论 -
JS基础之正则表达式判断用户密码格式以及等级
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </bod原创 2018-08-01 10:30:49 · 4482 阅读 · 0 评论 -
JS之正则表达式判断域名是否正确0-255的匹配
正则表达式中[]只能匹配个位数的区间,所以0-255是不能 直接用[]一次匹配的,需要分三种情况,是并列的,1位数用[0-9],两位数用[1-9][0-9]三位数中有三种情况,1开头1[0-9][0-9],2开头25开头为25[0-5],不是25开头的为2[0-4][0-9],以上为所有情况<!DOCTYPE html><html lang="zh-CN">&...原创 2018-08-01 10:25:01 · 7610 阅读 · 0 评论 -
JS之正则表达式之邮箱的验证
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input t原创 2018-08-01 10:19:44 · 169500 阅读 · 8 评论 -
JS原生利用正则去除字符串前后的空格
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body&原创 2018-08-03 09:12:43 · 694 阅读 · 1 评论 -
javaScript创建对象
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body&原创 2018-08-13 17:00:48 · 261 阅读 · 0 评论 -
canvas画布实现拖拽碰撞 canvas之isPointInPath解析
isPointInPath():判断指定的坐标点是否在canvas绘制的路径中,如果在返回true,如果不在返回false,只能判断最后一个绘制的封闭路径注意:strokeRect() fillRect();这两个方法不适用于isPointInPath()在canvas画布中所有的移动,都是通过清空画布重新绘制的,并不是向js中的dom元素一样移动,可以通过设置某一个具体对象的left...原创 2018-08-24 20:20:19 · 3120 阅读 · 0 评论 -
canvas制作简易画板
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">原创 2018-08-21 09:44:54 · 463 阅读 · 0 评论 -
hasOwnProperty,instanceof,isPrototypeof
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body&原创 2018-08-20 15:46:00 · 200 阅读 · 0 评论 -
canvas画布在画布中绘制2个小球在画布中做碰壁反弹,当两 小球相撞之后,两个小球交换速度
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #cv原创 2018-08-22 10:16:06 · 788 阅读 · 0 评论 -
canvas画布实现创建20个小球,小球在画布内碰壁反弹
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #cv{原创 2018-08-22 10:13:00 · 1122 阅读 · 0 评论 -
canvas画布实现刮刮乐刮奖
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #cv原创 2018-08-22 10:00:11 · 3468 阅读 · 0 评论 -
canvas画布实现放大镜
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #c原创 2018-08-22 09:34:32 · 1031 阅读 · 0 评论 -
hasOwnProperty()
hasOwnProperty()判断某一个属性是来源于本地属性还是继承与prototype对象的属性 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title>&原创 2018-08-13 17:21:42 · 1017 阅读 · 0 评论 -
javascript用原型prototype为所有数组都可以进行排序
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body&原创 2018-08-13 17:18:43 · 1289 阅读 · 0 评论 -
javascript之原型prototype
prototype:原型:每一个构造函数都有一个prototype属性,指向另一个对象,称之为原型对象,可以通过原型向已有的构造函数添加新的属性和方法,后面通过此构造函数创建的对象实例,都可以访问使用新添加的属性和方法如果对象的某个属性或者方法是相同的,在创建对象的时候对具体的某个对象添加属性会重复代码,并且占用不必要的内存,这个时候prototype就很有作用,用它设置具体的属性为某个构造函...原创 2018-08-13 17:15:36 · 168 阅读 · 0 评论 -
JS中正则表达式的基础知识点元字符
正则表达式:又称为:规则表达式 英语;Regluar Expression 简写:regex,regexp或者RE正则表达式:不是字符串,是字符串的匹配模式(规则)需要用反斜杠进行转移正则表达式的创建:1.字面量创建:由两个斜杠/包裹var reg = /a/; 匹配指定字符串中的"a"字符2.通过构造函数RegExp创建正则对象参数有二:1.正则表达式的内容,需要一个...原创 2018-08-01 10:17:33 · 780 阅读 · 0 评论 -
JS之鼠标事件拖动一个块移动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrap{ width: 100px; height:原创 2018-07-27 18:20:43 · 1801 阅读 · 0 评论 -
JS中模拟用户注册登录利用localStorage存储多个值
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input t原创 2018-07-30 16:32:40 · 6712 阅读 · 3 评论 -
JS之每点击div其中就生成一个随机背景色的小球,并在写div中做无规则运动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </bod原创 2018-07-16 16:54:48 · 3242 阅读 · 0 评论 -
JS之每次点击body生成一个背景色随机的div
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ height: 100%; } &a原创 2018-07-16 16:51:11 · 1530 阅读 · 0 评论 -
JS基础之DOM操作增删改查的操作
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 500px; height:原创 2018-07-16 16:48:48 · 1236 阅读 · 0 评论 -
JS经典基础案例,对话框
输入框中没有输入东西的时候按钮式是橘色的,不能点击,当有东西输入的时候按钮立马变成粉色,并且点击提交之后,会在下面生成一个信息框,点击右上角的x号,可以删除那条信息框<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document原创 2018-07-16 15:25:26 · 1453 阅读 · 0 评论 -
JS简单游戏之寻找不一样的图片
有一个n乘n的图片,寻找其中不同的,点击进入一下关<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap原创 2018-07-16 15:10:33 · 2260 阅读 · 0 评论 -
JS输出1~100中所有奇数的和
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body&原创 2018-06-30 10:51:26 · 20884 阅读 · 0 评论 -
JS页面中有一个ul列表,共有10个li标签,其中奇数项显示背景色红色,偶数项显示背景色黄色。(for,while各自实现一下)
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> li{ list-style:none; width: 1原创 2018-06-30 10:50:10 · 3752 阅读 · 0 评论 -
JS.页面中有一个ul列表,共有10个li标签,为每个列表项添加随机的背景色;页面中还有一个按钮,点击按钮,为每一个li更换随机的背景色。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title></title> <style> li{ width: 300px; height: 30px; }原创 2018-06-30 10:49:07 · 4395 阅读 · 0 评论 -
JS轮播图用tween.js动画库完成,并且有切换功能
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 500px; heigh原创 2018-07-16 21:50:28 · 698 阅读 · 0 评论 -
JS之冒泡排序
//要求将数组中的元素按从小到大的顺序进行排序,并输出 var arr = [22,1,33,19,77]; //外层循环:需要多少次比较才能将较大的搜一定到右边 for(var j=0;j<arr.length-1;j++){ //里层循环的作用每次完成循环就能将数组中最大的值换位到最右边 for(var i=0;i<arr.length-1-j;i++){ ...原创 2018-07-17 22:13:03 · 645 阅读 · 0 评论 -
JS中的跳转如何实现
假设点击一个按钮之后,跳转到另外一个界面,在不做任何JS操作时,a链接去完成这个使命当加入JS操作时,比如用户登录界面,登录账号密码完全匹配的情况下 点击登录按钮时候的跳转,就应该使用 表示在原有网页打开:window.location.href = "http://www.baidu.com";//这里可以是一个网址,也可以是自己的本地文件,表示在新的网页打开:window.open...原创 2018-07-30 16:27:52 · 3235 阅读 · 1 评论 -
JS基础之BOM之cookie封装的增删查
//对cookie添加,读取,删除数据的函数封装//添加一条cookie//name=value;expires=function setCookie(name,value,time){ var date = new Date(); var day = date.getDate(); date.setDate(day+time); document.cookie=name+"="...原创 2018-07-26 22:09:18 · 174 阅读 · 0 评论 -
JS基础之图片的预加载
图片的预加载:在用户浏览网页前预先对图片的资源呢进行加载,加载完成后再为用户呈现,提高页面浏览的流畅性,增加用户体验<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title>原创 2018-07-20 09:05:04 · 165 阅读 · 0 评论 -
JS基础之图片懒加载
图片懒加载,就是图片延迟加载,在需要显示图片的时候在进行资源加载,减少页面初次加载时间,提升用户体验<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> &l原创 2018-07-20 09:03:13 · 144 阅读 · 0 评论 -
JS基础之实现回到顶部
首先需要引入tween.js动画库点击该按钮,页面会回到顶部,并伴随一定动画<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style&原创 2018-07-19 22:50:52 · 183 阅读 · 0 评论 -
JS模仿花瓣网动态生成瀑布流,效果参考花瓣网
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; }原创 2018-07-19 22:38:34 · 2735 阅读 · 0 评论