web前端-JavaScript
网页特效JavaScript
C-A-L-D
双手代码,失去年华!
展开
-
es6补充
es6补充:模板字符串let name=‘张三’;let sex=‘男’;‘姓名:kname,性别:k{name},性别:kname,性别:{sex}’箭头函数(i,j)=>{}vm.$count(“app”);template 字符串模板属性computed 计算属性props第二章模块化(避免全局污染)commonJS,AMD,CMD,es6 module导入模块...原创 2020-06-12 11:37:09 · 170 阅读 · 0 评论 -
JavaScript之获取宽高
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth...原创 2020-03-19 22:21:57 · 117 阅读 · 0 评论 -
js禁止鼠标右键和禁止选中复制
1.禁止指定元素document.getElementById("active-intro").oncontextmenu = function () { event.returnValue = false; }2.禁止整个页面document.oncontextmenu = function () { ...原创 2020-02-21 15:12:45 · 513 阅读 · 0 评论 -
案例——贪吃蛇
<div class="map"></div><script src="food.js"></script><script src="Snake.js"></script><script src="Game.js"></script>food.js/** * Created b...原创 2020-02-18 17:00:27 · 218 阅读 · 0 评论 -
案例:JS手风琴效果
.......原创 2020-02-11 13:54:50 · 398 阅读 · 0 评论 -
案例:js跟着鼠标走特效(简单)
效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> img{ position: absolute; } </s...原创 2020-02-10 22:47:09 · 828 阅读 · 0 评论 -
js(十)——高级
。。。。。。原创 2020-02-09 21:22:28 · 253 阅读 · 0 评论 -
案例:JS轮播图
效果图代码步骤:做好最基本的css样式设置 做JS脚本控制1.基本样式设置:代码:HTML基本代码:<div class="all" id='box'><!-- 盒子 --> <div class="screen"><!--相框--> <ul> <li><a href...原创 2020-02-08 16:24:58 · 173 阅读 · 0 评论 -
js(十一)——案例
目录JS轮播图案例跟着鼠标走特效(简单)案例原创 2020-02-08 13:18:09 · 131 阅读 · 0 评论 -
JS之return用法
阻止超链接跳转案例:<body><script> //点击超链接弹出对话框 //阻止超链接的默认的跳转:return false</script><!--第一种写法:--><a href="http://www.baidu.com" onclick="alert('哎呀,我被点了'); return false">...原创 2020-02-07 15:39:04 · 215 阅读 · 0 评论 -
js(九)——事件
事件事件:触发-响应机制Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。事件三要素 事件源:触发(被)事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用var box = document.getElementById...原创 2020-02-04 23:20:30 · 482 阅读 · 0 评论 -
js(八)——DOM之DOM API
DOMDOM的概念文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JS...原创 2020-02-04 23:14:15 · 280 阅读 · 0 评论 -
js(七)——BOM之BOM API
Web APIWeb API介绍API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(con...原创 2020-02-04 22:52:28 · 1803 阅读 · 0 评论 -
js(六)——ECMAScript基础之对象及内置对象
对象字面量字面量:11 'abc' true [] {}等var o = { name: 'zs', age: 18, sex: true, sayHi: function () { console.log(this.name); }};思考:如何把学生对象、老师对象、英雄对象改写成字面量的方式对象创建方式 1.对象字面量 va...原创 2020-02-03 20:53:13 · 399 阅读 · 0 评论 -
js(五)——ECMAScript基础之函数
函数的定义 函数声明 function 函数名(){ // 函数体} 函数表达式 var fn = function() { // 函数体} 特点: 函数声明的时候,函数体并不会执行,只要当函数被调用的时候才会执行。 函数一般都用来干一件事情,需用使用动词+名词,表示做一件事情 tellStory sayHello等 函数体只有在调用...原创 2020-02-03 14:04:02 · 319 阅读 · 0 评论 -
js(四)——ECMAScript基础之数组
数组的定义数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。通过数组字面量创建数组// 创建一个空数组var arr1 = []; // 创建一个包含3个数值的数组,多个数组项以逗号隔开var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组var arr3 = ['a', 'c']; // 可以通过数组的len...原创 2020-02-03 14:03:25 · 195 阅读 · 0 评论 -
js(三)——ECMAScript基础之流程控制
顺序结构从上到下执行的代码就是顺序结构程序默认就是由上到下顺序执行的条件结构根据不同的情况,执行对应代码循环结构循环结构:重复做一件事情分支结构if (/* 条件1 */){ // 成立执行语句} else if (/* 条件2 */){ // 成立执行语句} else if (/* 条件3 */){ // 成立执行语句} else { //...原创 2020-02-03 14:01:16 · 208 阅读 · 0 评论 -
js(二)——ECMAScript基础之数据类型
变量如何使用变量var age = 10, name = 'zs';变量在内存中的存储数据类型简单数据类型Number、String、Boolean、Undefined、NullNumber类型 数值字面量:数值的固定值的表示法 110 1024 60.5 进制 十进制 var num = 9; 进行算数计算时,八进制...原创 2020-02-02 19:08:28 · 1480 阅读 · 0 评论 -
js(一)——了解
目录js(一)——了解js(二)——ECMAScript基础之数据类型js(三)——ECMAScript基础之流程控制js(四)——ECMAScript基础之数组js(五)——ECMAScript基础之函数js(六)——ECMAScript基础之对象及内置对象js(七)——BOM之BOM APIjs(八)——DOM之DOM APIjs(九)——事件js(十)...原创 2019-08-24 21:05:37 · 774 阅读 · 0 评论 -
js(十二)——特别问题推荐
js:为什么js代码块有时候不起作用,需要放在body标签中JavaScript是多线程还是单线程?window对象方法moveBy();moveTo()效果不显示JS之return用法JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试...原创 2019-10-06 10:17:00 · 156 阅读 · 0 评论