随笔分类 -  JavaScript

摘要:案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止。同时要求Div不能拖出屏幕显示区域外。 拖拽原理:距离不变、三个事件(onmousedown、onmousemove、onmouseup) 解决问题: 1、拖拽过程中,鼠标容易滑出Div区块 阅读全文
posted @ 2019-07-08 13:05 请叫我二狗哥 阅读(1228) 评论(0) 推荐(1)
摘要:贪吃蛇是一款80后、90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示。 参考代码: 思考:为什么采用下面递增循环代码就无法达到预期效果? 代码: 效果: 如果递增循环设计进行修改后,可以实现其它独特效果: 阅读全文
posted @ 2019-07-03 16:13 请叫我二狗哥 阅读(481) 评论(0) 推荐(0)
摘要:默认状态下,灰色面板出现。当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失。 主要考察:事件冒泡与取消事件冒泡。 代码: 参考代码: 阅读全文
posted @ 2019-07-02 12:59 请叫我二狗哥 阅读(374) 评论(0) 推荐(0)
摘要:通过补充代码,实现时钟实时显示当前时间:年、月、日、时、分、秒、日期。 参考答案: 阅读全文
posted @ 2019-06-27 12:46 请叫我二狗哥 阅读(384) 评论(0) 推荐(0)
摘要:通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间。具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模型,从特殊到一般。 //对数字进行双数判断,并且转换为字符串。函数很巧妙的应用了JS中的隐式类型转换 阅读全文
posted @ 2019-06-25 18:21 请叫我二狗哥 阅读(536) 评论(0) 推荐(0)
摘要:定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除。 setInterval()/setTimeout()BOM中的Window对象方法,以返回数字值id来清除定时器的排序位置存在一定的兼容性问题。通常采用一个变量接受定时器 阅读全文
posted @ 2019-06-21 13:00 请叫我二狗哥 阅读(4246) 评论(0) 推荐(0)
摘要:函数作用域和声明提前 《JavaScript权威指南》P57 函数作用域(function scope):变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。 JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。JavaScript这个特性被称为声明提前 阅读全文
posted @ 2019-06-20 13:33 请叫我二狗哥 阅读(235) 评论(0) 推荐(0)
摘要:要求:点击页面鼠标右键,阻止默认右键菜单的弹出,并弹出自定义右键菜单。 效果示例: 参考代码: 阅读全文
posted @ 2019-06-18 15:32 请叫我二狗哥 阅读(548) 评论(0) 推荐(0)
摘要:模拟火箭发射时的按钮状态:数字从10减少到0,在数字变为0之前按钮均为不可点击状态,在变为0后,按钮变为可点击状态。 参考代码: 阅读全文
posted @ 2019-06-14 11:13 请叫我二狗哥 阅读(601) 评论(0) 推荐(0)
摘要:1-20 作业 小伙伴们,掌握了JavaScript的语法、流程控制语句以及函数,接下来让我们运用所学知识完成如gif图所示的效果——计算自己出生那天是该年当中的第几天。 gif效果图如下: 任务描述 一、语言和环境 1、实现语言:HTML、JavaScript 2、环境要求及开发工具:Sublim 阅读全文
posted @ 2019-06-12 18:08 请叫我二狗哥 阅读(226) 评论(0) 推荐(0)
摘要:小伙伴们,掌握了JavaScript的语法、流程控制语句、内置对象以及DOM和BOM的知识,运用所学知识完成如下图所示的交互效果——轮播图。效果图如下: 具体交互效果图参考gif动态效果图,gif效果图如下: 任务描述一、语言和环境 1、实现语言 HTML、CSS、JavaScript 2、环境要求 阅读全文
posted @ 2019-05-30 09:42 请叫我二狗哥 阅读(690) 评论(1) 推荐(0)
摘要:JavaScript中对象转换为原始值遵循哪些原则? P52 对象到布尔值对象到布尔值的转换非常简单:所有的对象(包括数字和函数)都转换为true。对于包装对象亦是如此:new Boolean(false)是一个对象而不是原始值,它将转换为true。 对象到字符串对象到字符串(object-to-s 阅读全文
posted @ 2019-05-20 12:59 请叫我二狗哥 阅读(1523) 评论(0) 推荐(0)
摘要:在JavaScript字符串中,反斜线(\)有着特殊的用途,反斜线后加一个字符,就不再表示它们的字面义了,比如\n就是一个转义字符(escape sequence),它表示的是一个换行符。在表格3-1中列出了JavaScript转义字符以及它们所代表的含义。其中有两个是通用的,通过十六进制数表示La 阅读全文
posted @ 2019-05-18 13:38 请叫我二狗哥 阅读(2988) 评论(0) 推荐(0)
摘要:JavaScript substring()方法 substring()语法:string.substring(from,to)功能:返回字符串的一个子串参数说明:from 一个非负整数,指定要提取的子串的第一个字符在string中的位置to一个非负整数,比要提取的子串的最后一个字符的位置大1.如果 阅读全文
posted @ 2019-05-18 10:01 请叫我二狗哥 阅读(527) 评论(0) 推荐(0)
摘要:在JavaScipt中==(相等)和 (严格相等,strick equality 也有译作“恒等”、“全等”)用于比较两个值是否相等,两个运算符允许任意类型的操作数。如果操作数相等则返回true,否则返回false。 也称作严格相等运算符,它用来检测两个操作数是否严格相等。==运算符称作相等运算符, 阅读全文
posted @ 2019-05-17 12:39 请叫我二狗哥 阅读(1090) 评论(0) 推荐(0)
摘要:存取字符串、数字或布尔值的属性时,创建的临时对象称为包装对象。包装对象只是偶尔用来区分字符串值和字符串对象、数字和数值对象以及布尔值和布尔对象。由于字符串、数字和布尔值的属性都是只读的,并且不能给它们定义新属性,因此它们是有别于对象的。 要注意的是,可通过String(),Number()或Bool 阅读全文
posted @ 2019-05-16 12:52 请叫我二狗哥 阅读(505) 评论(0) 推荐(0)
摘要:对象是JavaScript的基本数据类型。对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值。对象也可看做是属性的无序集合,每个属性都是一个名/值对。属性名是字符串,因此我们可以把对象看成是从字符串到值得映射。然而,对象不仅仅是字符串到值的映射,除了可以保持自有属性, 阅读全文
posted @ 2019-05-13 12:54 请叫我二狗哥 阅读(3222) 评论(0) 推荐(0)
摘要:JavaScript的原始值是指数字、字符串、布尔值、null和undefined。 JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type)。JavaScript中的原始类型包括数字、字符串和布尔值。对象类型包括对象、数组和函数。 Jav 阅读全文
posted @ 2019-05-13 12:53 请叫我二狗哥 阅读(1797) 评论(0) 推荐(0)
摘要:二元加法运算符“+”在两个操作数都是数字或都是字符串时,计算结果是显而易见的。加号“+”的转换规则优先考虑字符串连接,如果其中一个操作数是字符串或者转换为字符串的对象,另外一个操作数会转换为字符串,加号讲践行字符串的连接操作。如果两个操作数都不是类字符串(string-like)的,那么都讲进行算数 阅读全文
posted @ 2019-05-12 17:28 请叫我二狗哥 阅读(755) 评论(0) 推荐(0)
摘要:JavaScript中的运算符根据其操作数的个数进行分类:一元运算符只对一个表达式执行操作,并产生一个新值;二元运算符将两个表达式合成一个稍复杂的表达式,换而言之,他们的操作数均是两个;JavaScript支持的一个三元运算符是条件判断运算符“?:”,它将三个表达式合并成为一个表达式。 一元运算符举 阅读全文
posted @ 2018-08-07 16:38 请叫我二狗哥 阅读(4069) 评论(0) 推荐(0)