2019年08月_Sherry Lupus

原创【Web】Web-API（No.71）原生js实现滑动轮播图

原生js实现滑动轮播图需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * {...

2019-08-16 10:40:29 276 2

原创【Web】Web-API（No.70）实现随机点名系统

实现随机点名系统需要素材点击图片联系我或私信、评论<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>随机点名系统</title> <style> body{ ...

2019-08-14 13:06:06 793

原创【Web】Web-API（No.69）下课倒计时-自动播放下课铃声

下课倒计时-自动播放下课铃声需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时</title> <script src="common.js"></s...

2019-08-14 13:05:50 372

原创【Web】Web-API（No.68）获取当前时间并格式化

获取当前时间并格式化需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设置时间</title> <script src="common.js"></scrip...

2019-08-14 13:05:34 371

原创【Web】Web-API（No.67）定时器实现星星闪烁

定时器实现星星闪烁需要素材点击图片联系我或私信、评论效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>一闪一闪亮晶晶</title> <style> * { ...

2019-08-14 13:05:19 289 1

原创【Web】Web-API（No.66）点击更换背景图片

点击更换背景图片需要素材点击图片联系我或私信、评论效果图<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>点击更换背景图片</title> <script> onload = f...

2019-08-14 13:05:04 592

原创【Web】Web-API（No.65）事件

事件需要素材点击图片联系我或私信、评论事件：触发-响应机制Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。事件三要素事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程序:事件触发后要执行的代码(函数形式)事件的基本使用var box = document.getElementById...

2019-08-13 11:12:08 178

原创【Web】Web-API（No.64）DOM案例（三）表单验证

表单验证需要素材点击图片联系我或私信、评论效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <style> * { ...

2019-08-13 11:11:56 483

原创【Web】Web-API（No.63）DOM案例（二）随机抽奖

随机抽奖需要素材点击图片联系我或私信、评论效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机抽奖</title> <style> * { ...

2019-08-13 11:11:44 251

原创【Web】Web-API（No.62）DOM案例（一）随机更改盒子透明度

随机更改盒子透明度需要素材点击图片联系我或私信、评论效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随即更改盒子透明度</title> <style> ...

2019-08-13 11:11:31 267

原创【Web】Web-API（No.61）innerText和innerHTML

innerText和innerHTML需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>innerText和innerHTML</title></head><bo...

2019-08-13 11:11:20 140

原创【Web】Web-API（No.60）innerText和textContent

innerText和textContent需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>innerText和textContent</title></head>&l...

2019-08-13 11:08:00 157

原创【Web】Web-API（No.59）自定义属性

自定义属性需要素材点击图片联系我或私信、评论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义属性</title></head><body><ul id="uu"> ...

2019-08-13 11:07:49 124

DOM需要素材点击图片联系我或私信、评论DOM的概念文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方...

2019-08-13 11:07:37 157

原创【Web】Web-API（No.57）BOM

BOM需要素材点击图片联系我或私信、评论BOM的概念BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、...

2019-08-13 11:07:25 121

原创【Web】Web-API（No.56）初识Web API

Web API需要素材点击图片联系我或私信、评论Web API介绍API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(...

2019-08-13 11:07:08 164

原创【Web】HTML+CSS（No.55）实现小米官网首页静态效果

模仿实现小米官网首页静态布局需要素材点击图片联系我或私信、评论效果图HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米官网</title> <link rel="stylesheet...

2019-08-12 19:43:33 1817 5

原创【Web】JavaScript（No.54）对象（Math对象、Date对象、Array对象、String对象、JSON数据的格式）

对象需要素材点击图片联系我或私信、评论为什么要有对象function printPerson(name, age, sex....) {}// 函数的参数如果特别多的话，可以使用对象简化function printPerson(person) { console.log(person.name); ……}什么是对象<!DOCTYPE html><ht...

2019-08-12 19:00:23 170

原创【Web】JavaScript（No.53）作用域&解析域

需要素材点击图片联系我或私信、评论作用域作用域：变量可以起作用的范围<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>作用域</title></head><body><script...

2019-08-12 18:53:03 103

原创【Web】JavaScript（No.52）函数

函数需要素材点击图片联系我或私信、评论为什么要有函数如果要在多个地方求1-100之间所有数的和，应该怎么做？什么是函数把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用函数的作用就是封装一段代码，将来可以重复使用函数的定义函数声明function 函数名(){ // 函数体}函数表达式...

2019-08-12 17:47:58 176

原创【Web】JavaScript（No.51）数组

数组需要素材点击图片联系我或私信、评论为什么要学习数组之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？数组的概念所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。数组的定义数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。...

2019-08-12 17:36:24 130

原创【Web】JavaScript（No.50）循环语句-break和continue

continue和breakbreak:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...

2019-08-12 17:30:45 202

原创【Web】JavaScript（No.49）for循环案例（四）兔子繁殖-斐波那契数列

需要素材点击图片联系我或私信、评论需求：有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？（兔子的规律为数列，1，1，2，3，5，8，13，21）<!DOCTYPE html><html...

2019-08-12 17:20:57 1044

原创【Web】JavaScript（No.48）for循环案例（三）本金计算

需要素材点击图片联系我或私信、评论需求：本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>本金计算</titl...

2019-08-12 16:48:32 1942

原创【Web】JavaScript（No.47）for循环案例（二）打印九九乘法表

需要素材点击图片联系我或私信、评论九九乘法表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九九乘法表</title></head><body><script> //...

2019-08-12 16:45:38 259

原创【Web】JavaScript（No.46）for循环案例（一）打印五角星矩形阵及直角三角形阵

需要素材点击图片联系我或私信、评论五角星矩形阵<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五角星矩形阵</title></head><body><script> ...

2019-08-12 16:43:28 1011

原创【Web】JavaScript（No.45）循环结构-for语句

for语句需要素材点击图片联系我或私信、评论while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便for循环语法：// for循环的表达式之间用的是;号分隔的，千万不要写成,for (初始化表达式1; 判断表达式2; 自增表达式3) { // 循环体4}执行顺序：1243 ---- 243 -----243(直到循环条...

2019-08-12 16:37:21 252

Sherry带你学Web