JavaScript
H之一
前端设计
展开
-
使用JavaScript控制按钮点击触发的时间段
话不多说直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./addevent.js"></script> <title>D原创 2020-11-18 17:31:12 · 768 阅读 · 2 评论 -
JavaScript中偏移量属性
偏移量:获取在已定位的父级元素的子元素位置属性 offsetLeft 取正值从左向右偏移,取负值从右向左偏移 offsetTop 取值从上向下偏移,取负值从下向上偏移 offsetWidht 获取元素的宽度 offsetHeight 获取元素的高度 offsetParent 获取定位过的父元素,即有可能不是离得最近的父级元素客户区大小: clientLeft 离已定位的父级元素的左边距,包括自身左边框宽度 clientTop 离已定位的父级元素的上边距,包括自身上原创 2020-11-18 16:32:29 · 963 阅读 · 0 评论 -
JavaScript的event常见属性&鼠标和键盘的事件
event的常见属性 event.type 获取事件类型 event.clientX/clientY 获取当前事件源在浏览器窗口中的位置 event.pageX/pageY 获取当前事件源在页面中的位置 event.screenX/screenY获取当前事件源在屏幕中的位置 event.target ||event.srcElement 当前事件源 event.pr原创 2020-11-18 15:59:49 · 344 阅读 · 0 评论 -
DOM增加元素属性/dom事件
增: 元素(标签),节点创建元素三种方法:1 document.write(“html”);2 元素对象.innerHTML = “html”3 document.createElement(“标签名”); 创建元素对象,返回值元素对象.appendChild(子元素对象); 添加给body添加:document.body.appendChild(子元素对象);注:建议使用第三方法,性能最好元素对象.insertBefore(要插入的元素,已有元素); 在某元素之前插入元素元素对原创 2020-11-16 15:52:00 · 468 阅读 · 0 评论 -
Web API
BOM 常用APIAlert() 没有返回值Prompt() 返回值为字符串Confirm() 返回值为布尔型Onload 这是个属性,取值是函数,作用页面全部加载完执行函数Onunload 这是个属性,取值是函数,作用完全退出页面执行函数Onbeforeunload 这是个属性,取值是函数,作用退出页面前执行函数定时器:1.setTimeout(), setTimeout(函数,毫秒时间);在指定的时间之后,执行一次函数。clearTimeout(存贮任务变量名) 清除原创 2020-11-16 15:45:54 · 82 阅读 · 0 评论 -
JavaScript控制灯泡开关
在html中使用<button>按钮去控制灯泡的开关。首先写出HTML中的灯泡和开关按钮:HTML:<div id=""> <img src="guan.jpg" ><br> <button onclick="kaiGuan()" id="kg">开</button> </div>JS: //使用变量获取到html中的灯泡和按钮; var deng = document.getEl原创 2020-11-16 15:22:24 · 761 阅读 · 0 评论 -
解析查询字符串
var queryStr = "https://www.baidu.com/s?wd=%E5%90%89%E5%B0%94%E6%8B%9C%E7%99%BB&rsv_spt=1&rsv_iqid=0x8918dabe0005151c&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ih_0&rsv_sug3=1&原创 2020-11-09 17:44:02 · 335 阅读 · 0 评论 -
JavaScript实现简单时钟变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #nowspan{原创 2020-11-08 18:47:36 · 159 阅读 · 0 评论 -
查找字符串中所有某个字符出现的位置
//查找字符串中所有i出现的位置 function search(str){ //index 为 i出现的位置 var index = str.indexOf('i') //num为i出现的次数 var num = 0 while(index !== -1){ console.log(index); num ++ index += 1 index = st原创 2020-11-05 00:16:30 · 1345 阅读 · 0 评论 -
JavaScript各类标签的使用
内置对象:Date创建日期对象:1.Date() 无参2.Date(字符串)3.Date(年,月,日)// 获取当前时间,UTC世界时间,距1970年1月1日(世界标准时间)起的毫秒数 var now = new Date(); console.log(now.valueOf()); // 获取距1970年1月1日(世界标准时间)起的毫秒数 Date构造函数的参数 1. 毫秒数 1498099000356 new Date(1498099000356原创 2020-11-04 17:31:35 · 355 阅读 · 0 评论 -
函数中的更多用法
arguments的使用JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历案例:求任意个数的最大值://求一组数中的最大值 function arr(){ var max = arguments[0]; console.log(argume原创 2020-11-04 15:21:50 · 145 阅读 · 0 评论 -
JavaScript函数的执行
函数就是重复执行的代码片为什么要有函数?如果要在多个地方求1-100之间所有数的和,应该怎么做?什么是函数?把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用函数的作用就是封装一段代码,将来可以重复使用函数的定义:·函数声明function 函数名(){ //函数体 }·函数表达式var fn = function() { // 函数体 }特点:函数声明的时候,函数体并不会执行,只要当函数被调用的时候才原创 2020-10-29 23:35:20 · 240 阅读 · 0 评论 -
JavaScript中数组的概念
为什么要学习数组?之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的姓名,此时该如何存储?数组的概念所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中。那么这个集合我们就成为数组。数组的定义数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。通过数组字面量创建数组<script> //创建一个空数组 var arr1 = []; //创建一个原创 2020-10-28 21:11:05 · 193 阅读 · 0 评论 -
javascript关于for循环语句的使用方法
for语句whlie和do…whlie一般是用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便for循环语法:// for循环的表达式之间用的是;号分隔的,千万不要写成, for (初始化表达式1; 判断表达式2; 自增表达式3) { // 循环体4 }执行顺序:1243—243—243(直到循环条件变成flase)1.初始化表达式2.判断表达式3.自增表达式4.循环体案例:打印1-100之间所有数<script> for(原创 2020-10-27 21:12:23 · 437 阅读 · 0 评论 -
JS语句结构
流程控制语句:程序的三种基本结构(1)顺序结构;(2)选择结构;单分支结构; 语法: if(条件){语句体} / 条件&& 语句体var score=90;if(score>80){console.log('优秀'); } //(条件默认为true)双分支结构; 语法: if(条件){语句体}else{语句体}(1) if(score>90){ alert('成绩大于90'); }else{ alert('成绩小于90'); }原创 2020-10-27 14:09:07 · 175 阅读 · 0 评论 -
JavaScript变量与数据类型的应用
JavaScript是运行在客户端(浏览器)的脚本语言,是基于事件驱动的弱类型的脚本语言; 浏览器的内核: 渲染引擎和JS引擎 &nb原创 2020-10-24 15:24:50 · 185 阅读 · 0 评论 -
jQuery_基础学习4
jQuery-Ajax简介1.AJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新load()从服务器加载数据,并把返回的数据放置到指定的元素中语法:$(selector).load(url,data,function(response,status,xhr))url必需。规定您需要甲在的URLdata可选。规定连同请求发送到服务器的数据function(response,status,xhr)可选。规定load()方法原创 2020-09-18 15:37:04 · 145 阅读 · 0 评论 -
jQuery_基础学习3
jQueryjQuery-添加元素append()-在被选中元素中插入内容【由下往上】prepend()-在被选中元素中插入内容【由上往下】after()-在被选元素之后插入内容before()-在被选元素之前插入内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ .原创 2020-09-17 16:16:36 · 115 阅读 · 0 评论 -
jquery_基础简介1
jQuery 是一个 JavaScript 库。[.js]jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 简介jQuery库可以通过一行简单的标记被添加到网页中。例如:<script scr="js/jquery.js"></script>您需要具备的基础知识在您开始学习jQuery之前,您应该对一下知识有基本的了解:HTMLCSSJavaScript**什么是jQuery?**jQuery是一个轻量级.原创 2020-09-15 17:47:15 · 119 阅读 · 0 评论 -
JavaScript_学习10
总结步骤:创建HttpRequest对象我们需要判断浏览器,不同的浏览器创建这个HttpRequest对象的时候,是使用的对象不同window.XMLHttpRequest-----IE7+, Firefox, Chrome, Opera, Safari 浏览器— XMLHttpRequest----IE5,IE6浏览器------ActiveXObject(“Microsoft.XMLHTTP”);2.请求发送以后的处理动作XMLHttpRequest 对象属性属性描述原创 2020-09-12 10:37:21 · 154 阅读 · 0 评论 -
JavaScript_基础简介9
1. JavaScript 异步编程 [javascript AJAX]简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高.什么时候用异步编程在前端编程中(甚至后端有时也是这样),当一个事件没有结束时,界面将无法处理其他请求。现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。为了避免这种情况的发生,我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情,比如读取一个大文件或者发出一个网络请求。因原创 2020-09-11 10:08:45 · 217 阅读 · 0 评论 -
JavaScript_基础简介8
1.JavaScript Browser BOMBOM—浏览器对象模型1.1 JavaScript Window 对象所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <scri原创 2020-09-10 09:45:26 · 98 阅读 · 0 评论 -
JavaScript_基础练习7
https://www.w3school.com.cn/js/index.asp1. JavaScript HTML DOMHTML-----html标记JavaScript -----javascript对象/变量我们现在需要通过JavaScript来改变html标记所呈现的样子/样式/位置等等。那么这是我们就需要将html标记转换成javascript对象将html标记转换成javascript对象----HTML DOM对象DOM(文档对象模型)当网页被加载时,浏览器会创建页面的文档对象原创 2020-09-09 10:10:47 · 120 阅读 · 0 评论 -
JavaScript_简介学习4
JavaScript_4https://www.w3school.com.cn/js/index.asp1.JavaScript 数字JavaScript 只有一种数值类型。[没有整数和小数之分]实例:var x = 3.14; // 带小数点的数值var y = 3; // 不带小数点的数值超大或超小的数可通过科学计数法来写:实例:var x = 123e5; // 12300000var y = 123e-5; // 0.00123JavaScript原创 2020-09-03 14:45:13 · 145 阅读 · 0 评论 -
JavaScript_基础学习3
https://www.w3school.com.cn/js/index.asp1.JavaScript 事件HTML事件是发生在HTML元素上的“事情”.当在HTML页面中使用JavaScript时,JavaScript能够“应对”这些事件。通过JavaScript代码,向HTML元素添加事件处理程序。格式1:<html 元素 事件名称=“JavaScript代码对应时间的处理程序”><html> <head> <meta charset=原创 2020-09-02 16:10:29 · 108 阅读 · 0 评论 -
JavaScript_简介2
https://www.w3school.com.cn/js/index.asp1.javascript 运算符JavaScript 使用(=)复制运算符。JavaScript 使用算数运算符(+ - * / % ++ --)来计算值。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/原创 2020-09-01 20:00:45 · 124 阅读 · 0 评论 -
javascript的简介
1.为何学习 JavaScript? JavaScript 是 web 开发者必学的三种语言之一:HTML 定义网页的内容----[制作网页]----简单枯燥CSS 规定网页的布局和样式—[美化网页]HTML+CSS—网页—没有动态的网页【1.无动态效果 2.数据没有动态化】JavaScript 对网页行为进行编程【动态效果,数据动态加载】2. 什么是JavaScript? 1.javascript和java是完全不同的语言,不论是概念还是设计。 网景----浏览器【Netscap原创 2020-08-29 17:19:09 · 197 阅读 · 0 评论