前端
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 · 847 阅读 · 2 评论 -
JavaScript中偏移量属性
偏移量:获取在已定位的父级元素的子元素位置属性 offsetLeft 取正值从左向右偏移,取负值从右向左偏移 offsetTop 取值从上向下偏移,取负值从下向上偏移 offsetWidht 获取元素的宽度 offsetHeight 获取元素的高度 offsetParent 获取定位过的父元素,即有可能不是离得最近的父级元素客户区大小: clientLeft 离已定位的父级元素的左边距,包括自身左边框宽度 clientTop 离已定位的父级元素的上边距,包括自身上原创 2020-11-18 16:32:29 · 982 阅读 · 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 · 374 阅读 · 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 · 484 阅读 · 0 评论 -
Web API
BOM 常用APIAlert() 没有返回值Prompt() 返回值为字符串Confirm() 返回值为布尔型Onload 这是个属性,取值是函数,作用页面全部加载完执行函数Onunload 这是个属性,取值是函数,作用完全退出页面执行函数Onbeforeunload 这是个属性,取值是函数,作用退出页面前执行函数定时器:1.setTimeout(), setTimeout(函数,毫秒时间);在指定的时间之后,执行一次函数。clearTimeout(存贮任务变量名) 清除原创 2020-11-16 15:45:54 · 93 阅读 · 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 · 805 阅读 · 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 · 366 阅读 · 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 · 186 阅读 · 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 · 1361 阅读 · 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 · 387 阅读 · 0 评论 -
函数中的更多用法
arguments的使用JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历案例:求任意个数的最大值://求一组数中的最大值 function arr(){ var max = arguments[0]; console.log(argume原创 2020-11-04 15:21:50 · 178 阅读 · 0 评论 -
JavaScript函数的执行
函数就是重复执行的代码片为什么要有函数?如果要在多个地方求1-100之间所有数的和,应该怎么做?什么是函数?把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用函数的作用就是封装一段代码,将来可以重复使用函数的定义:·函数声明function 函数名(){ //函数体 }·函数表达式var fn = function() { // 函数体 }特点:函数声明的时候,函数体并不会执行,只要当函数被调用的时候才原创 2020-10-29 23:35:20 · 283 阅读 · 0 评论 -
JavaScript中数组的概念
为什么要学习数组?之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的姓名,此时该如何存储?数组的概念所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中。那么这个集合我们就成为数组。数组的定义数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。通过数组字面量创建数组<script> //创建一个空数组 var arr1 = []; //创建一个原创 2020-10-28 21:11:05 · 222 阅读 · 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 · 470 阅读 · 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 · 192 阅读 · 0 评论 -
JavaScript变量与数据类型的应用
JavaScript是运行在客户端(浏览器)的脚本语言,是基于事件驱动的弱类型的脚本语言; 浏览器的内核: 渲染引擎和JS引擎 &nb原创 2020-10-24 15:24:50 · 196 阅读 · 0 评论 -
CSS margin-top塌陷问题
在俩个盒子嵌套的时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:1.外部盒子设置一个边框2.外部盒子设置voerflow:hidden3.使用伪元素类;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2020-10-10 15:21:10 · 151 阅读 · 0 评论 -
HTML标签书写格式大全
一、常用浏览器与浏览器内核1.常用浏览器chromo(推荐谷歌)Firefox(火狐)IE浏览器Opera浏览器safari浏览器2.浏览器内核浏览器内核的主要组成部分:渲染引擎(layout或engine)和JS引擎渲染引擎:负责获取网页的内容(HTML.XML.图像等)、整理信息(加入CSS等),已经计算网页的显示方式,然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序原创 2020-09-28 18:35:55 · 3603 阅读 · 0 评论 -
CSS图案设计
1.边框的设计边框其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。边框圆角border-radius 每个角可以设置两个值 ,x 值,y 值1: 边框圆角处理2: 正方形<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs原创 2020-09-27 17:55:45 · 195 阅读 · 0 评论 -
CSS设置文本字体,链接,背景等
一、CSS基础样式1.CSS文本及字体设计常用的应用文本的CSS样式设置文字的颜色color:red;设置文字的大小font-size:12px;设置文字的字体font-family:‘微软雅黑’;设置字体不倾斜font-style:‘normal’;设置字体倾斜font-style:‘italic’;设置文字是否加粗font-weight:bold; font-weight:normal设置文字的行高line-height:24px;原创 2020-09-25 19:07:23 · 638 阅读 · 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 · 178 阅读 · 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 · 138 阅读 · 0 评论 -
jquery_基础简介2
jQuery 效果- 隐藏和显示1. javascript控制隐藏和显示通过控制css样式的display属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> window.onload=function(){ d.原创 2020-09-16 17:03:04 · 122 阅读 · 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 · 147 阅读 · 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 · 174 阅读 · 0 评论 -
JavaScript_基础简介9
1. JavaScript 异步编程 [javascript AJAX]简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高.什么时候用异步编程在前端编程中(甚至后端有时也是这样),当一个事件没有结束时,界面将无法处理其他请求。现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。为了避免这种情况的发生,我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情,比如读取一个大文件或者发出一个网络请求。因原创 2020-09-11 10:08:45 · 249 阅读 · 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 · 110 阅读 · 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 · 136 阅读 · 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 · 161 阅读 · 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 · 125 阅读 · 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 · 140 阅读 · 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 · 209 阅读 · 0 评论 -
CSS基本属性(三)
CSS基本属性3Transition—复合属性[检索或设置对象变换时的过渡。]<’ transition-property '>: 检索或设置对象中的参与过渡的属性none: 不指定过渡的css属性all: 所有可以进行过渡的css属性自定义属性:指定要进行过渡的css属性<’ transition-duration '>: 检索或设置对象过渡的持续时间时长:指定对象过渡的持续时间 [单位s秒]<’ transition-timing-function '>原创 2020-08-27 16:24:07 · 136 阅读 · 0 评论 -
CSS基本原理入门
1. 表格属性属性名称用途取值border-collapse设置或检索表格的行和单元格的边是合并还是独立。separate: 边框独立 collapse: 相邻边被合并border-spacing边框独立时,单元格与单元格之间的间距数字,不允许负值empty-cells设置或检索当表格的单元格无内容时,是否显示该单元格的边框。hide:隐藏该单元格的边框。 show:显示该单元格的边框。<!DOCTYPE html><html>原创 2020-08-26 15:35:21 · 187 阅读 · 0 评论 -
CSS基本原理入门
CSS基础属性1.什么是CSS?2.如何导入CSS到html文件中?【3种】3.CSS的基本选择器4.CSS的基本属性4.1 修饰文本样式属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0" c原创 2020-08-25 17:28:29 · 269 阅读 · 0 评论 -
CSS基本原理入门级
CSS-1什么是css?CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 [美化页面]。如何将css加入您的网页中?内联定义 (Inline Styles)在html的开始标记内使用style属性定义适用标记样式表属性。<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2020-08-22 16:16:23 · 276 阅读 · 0 评论 -
HTML表单元素简介
1表单元素input 文本框/密码框/单选按钮/复选框…1.1文本框<input type=”text” name=”username” value=”初始值”></input>属性type=”text”–表示文本框属性name=”username”—告诉后台处理程序文本框中输入的数据值属性value=”初始值”-------初始值1.2密码框<input type=”password” name=”password” value=”初始密码”></原创 2020-08-21 16:53:41 · 1148 阅读 · 0 评论 -
web表格制作
1.表格的制作1、表格元素–<table>表格中的行–<tr>表格中的列–<td>表格中的表头–【居中/加粗】table标记的边框–bordertable标记的宽度–widthtable标记的高度–heighttable标记的水平对齐方式–aligntable标记的表格背景色–bgcolortable标记的表格边框色–bordercolortable标记的表格中的内容与边框之间的距离–cellpaddingtable标记的表格中的边框与边框之间的距原创 2020-08-20 16:32:22 · 10405 阅读 · 0 评论 -
HTML初学优选
HTML1.换行标记2. HTML中的注释注释–解释说明自己编写的html代码是什么含义为了让被人能看懂为了让以后的自己还能看懂特征:不会被执行可以利用注释不会被执行的特点来调试页面。例如:用法:一般写在html代码的上面,表示说明下面的代码还含义。在调试页面的时候可以用来注释掉html代码。注释是不能包含注释的。3.align属性默认的标题标记~/段落标记都是在左对齐,如果我们需要设置标题标记~/段落标记水平对齐方式,需要使用align属性来设置水平对齐方式,这个属原创 2020-08-19 16:31:28 · 382 阅读 · 0 评论