JavaScript
文章平均质量分 55
JavaScript零基础笔记
小脆筒style
吃得苦中苦方为人上人
展开
-
3.9 JS制作登录验证码
制作登录验证码制作一张网站后台登录页,设计四个汉字的验证码,设计相应的php接收页,只有账号、密码和验证码都正确才显示登录成功dl.html<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>用户登陆</title> <style> .content{ width:400px;原创 2021-06-17 16:59:23 · 1139 阅读 · 2 评论 -
3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style>原创 2021-06-17 15:59:55 · 1326 阅读 · 1 评论 -
3.7 使用JavaScript读取XML文件
使用JavaScript读取XML文件XML文件自行创建,文档树结构如下:根节点下三个子节点,每个子节点下5个子节点,随便选取第三层一组节点,读取其中信息,节点命名、及文本信息自行设定。直观图相关代码index.html<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>通过JavaScript读取XML文档中原创 2021-06-17 15:41:22 · 1055 阅读 · 1 评论 -
3.6 用正则表达式验证注册表单页面
用正则表达式验证注册表单页面制作一张注册页,页面自行设计,页面元素命名自行设置,需要验证如下信息:用户名:(允许2-4个汉字)电话:(开头3或4位,”-”号隔开,后面7或8位)手机号码:开头3位必须合法,后面8位数字邮箱:有效邮箱格式身份证号码:有效身份证号码学号验证:分析你自己的学号规律index.html<!DOCTYPE html><html lang="en"><head> <meta cha原创 2021-06-17 15:08:21 · 2856 阅读 · 1 评论 -
3.5 制作页面日期显示特效--案例2
案例2-制作页面日期显示特效使用图片显示年、月、日、小时、分钟、秒,图片要能实时显示时间。index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>用图片显示时钟</title> </head> <style> div{ font-size: 70px; pa原创 2021-06-17 14:46:54 · 230 阅读 · 1 评论 -
3.4 制作页面日期显示特效--案例1
案例1:制作页面日期显示特效使用图片显示年、月、日、小时、分钟、秒,图片要能实时显示时间。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数码时钟</title> <style type="text/css"> h2{ font-family: "微软雅黑"; text-align:原创 2021-06-17 14:32:24 · 298 阅读 · 0 评论 -
3.3 Js设置网页动画效果(案例3)
Js设置网页动画效果(案例3)制作按时间随机变换网页背景页面index.html<html> <head></head> <body> <script language="javascript"> var now = new Date(); var hour = now.getHours(); if (hour >= 0 &原创 2021-06-17 14:24:04 · 316 阅读 · 0 评论 -
3.2 Js设置网页动画效果(案例2)
Js设置网页动画效果(案例2)制作按时间随机变换网页背景页面index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { padding: 0; marg原创 2021-06-17 14:16:33 · 152 阅读 · 0 评论 -
3.1 Js设置网页动画效果(案例1)
Js设置网页动画效果-案例1制作按时间随机变换网页背景页面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 制作按时间随机变换网页背景页面</TITLE><script type="text/javascript"> window.onload = function(){ change原创 2021-06-17 14:02:02 · 209 阅读 · 0 评论 -
2.9 JavaScript 登录页面
登录页面代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t原创 2021-06-10 14:49:02 · 559 阅读 · 1 评论 -
2.8 JavaScript 分支流程控制 switch语句
语法结构switch 语句也是多分支语句,它用于 基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switchswitch 语句也是多分支语句 也可以实现多选 1语法结构 switch 转换、 开关 case 小例子或者选项的意思执行思路:利用我们表达式的值 和 case 后面的选项值相匹配,如果匹配上,就执行该case里面的语句 如果都没有匹配上。那么执行 default里面的语句<script> // 语法结构原创 2021-05-18 14:30:53 · 140 阅读 · 0 评论 -
2.7 JavaScript 三元表达式
三元表达式有三元运算符组成的式子称为三元表达式语法结构:条件表达式 ?表达式 1:表达式 2执行思路:如果条件表达式结果为真,则返回 表达式 1 的值;如果条件表达式结果为假,则返回 表达式 2 的值案例:数字补0用户输入数字,如果数字小于10,则在前面补01、09,如果数字大于10 ,则不需要补。案例分析用户输入0~59 之间的 一个数字如果数字小于10 ,则在这个数字前面补0(加0),否则不做操作用一个变量接受这个返回值,输出代码实现<!DOCT原创 2021-05-18 10:51:25 · 218 阅读 · 0 评论 -
2.6 JavaScript 判断成绩级别
分支流程控制 if 语句案例:判断成绩级别要求:接收用户输入的分线,根据分线输出对应的等级字母 A、B、C、D、E其中:90分(含)以上,输出:A80分(含)~ 90分(不含), 输出:B70分(含)~ 80分(不含), 输出:C60分(含)~ 70分(不含), 输出:D60分(不含)一下,输出:E代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8" />原创 2021-05-18 10:20:30 · 4539 阅读 · 0 评论 -
2.5 JavaScript 计算器-三个弹框计算结果
JS简单计算器<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>计算器</title></head><body><script> function alert(){ var s1=prompt("请输入数值1","0"); var op1=prompt("请输入运原创 2021-05-13 11:18:28 · 897 阅读 · 0 评论 -
2.4 JavaScript Math()封装自己的数学对象
封装数学对象<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Math</title> <script> // 利用对象封装自己的数学对象 里面有 PI 最大值和最小值 var myMath = { PI: 3.141592653, max: function(){原创 2021-05-07 14:50:00 · 171 阅读 · 0 评论 -
2.3 JavaScript 实现自动轮播图
自动轮播图文件保存的时候,记得注意文件路径是否正确!!!相关代码demo.html<!DOCTYPE HTML><head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./demo.css"> <title>自动轮播图</title></head><body> <div class="sl原创 2021-04-26 21:57:40 · 114 阅读 · 0 评论 -
2.2 JavaScript实现动态数字时钟
动态数字时钟实现效果代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } #box {原创 2021-04-24 16:48:04 · 864 阅读 · 0 评论 -
2.1JavaScript 计算数组的和以及平均值
计算数组的和以及平均值求数组 [2,6,1,7,4] 里面所有元素的和以及平均值<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>数组求和&平均值</title></head><body><script> // 1.求数组 [2,6,1,7,4] 里面所有元素的和以及平均值原创 2021-04-22 18:44:56 · 2967 阅读 · 0 评论 -
1.9 JavaScript 遍历数组
遍历数组数组的长度使用 “数组名.length” 可以访问数组元素的数量(数组长度)a.length 动态监测数组元素的个数案例请将 [“关羽”, “张飞”, “赵云”,“小脆筒”], 将数组里的元素依次打印到控制台代码实现<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>遍历数组</title></head>原创 2021-04-22 18:20:25 · 879 阅读 · 0 评论 -
1.8 JavaScript 数组练习,输出星期天
数组练习定义一个数组,里面存放星期一,星期二…直到星期日(共7天)。请输出星期日!<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>输出星期日</title></head><body><script> // 定义星期一到星期日 var a = ['星期一', '星期二', '星期三'原创 2021-04-22 17:44:29 · 1582 阅读 · 0 评论 -
1.7 JavaScript 什么是数组以及创建方式
数组的概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的方式。数组的创建方式JS中创建数组有两种方式利用 new 创建数组利用数字字面量创建数组利用 new 创建数组注意 Array() A要大写// 1.利用 new 创建数组 var arr = new Array(); //创建了一个空的数组 利用数字字面量创建数组1)数组的字面量是方括号 [ ]2)声明数组并赋值成为原创 2021-04-22 17:33:57 · 102 阅读 · 0 评论 -
1.6 JavaScript实现36个数字里面随机取数
随机取数用循环语句,在JavaScript代码中实现:36个数字里面随机抽取 一等奖中奖的 7个数字<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>随机抽取数字</title></head><body><script>//随机抽取数字 var str="一等奖中奖数字:";原创 2021-04-22 15:01:52 · 402 阅读 · 0 评论 -
1.5 用JS实现简易计算器的加减乘除功能
JS实现简易计算器背景设计一个简易计算器,具有能对两个操作数进行加、减、乘、除运算的简易计算器。需要正确的设计Web前端页面,能正确进行数据类型的转换,能正确使用选择结构,在JavaScript中定义函数,通过按钮事件调用定义好的JavaScript函数。设计页面使用合适的开发工具,设计计算器的页面先把 01.jpg 和 02.jpg 图片下载下来放在同一层目录下01.jpg02.jpg代码实现1. index.html页面<!DOCTYPE html><ht原创 2021-04-12 23:29:34 · 2950 阅读 · 1 评论 -
1.4 显示年龄案例
显示年龄案例实现思路:弹出一个输入框(prompt),让用户输入年龄(用户输入)把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接(程序内部处理)使用alert语句弹出警示框(输出结果)<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>显示年龄案例</title></head><body>原创 2021-04-09 23:41:36 · 461 阅读 · 0 评论 -
1.3 交换两个变量的值
案例:交换两个变量的值要求:交换两个变量的值(实现思路:使用一个临时变量 用来做中间存储)代码实现<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>交换两个变量的值</title> <script> // js是编程语言有很强的逻辑性在里面:实现这个要求的思路 先怎么做后怎么做 // 1原创 2021-03-06 20:29:17 · 339 阅读 · 0 评论 -
1.2 案例2:变量的使用
案例2 变量的使用:弹出一个输入框,提示用户输入姓名;弹出一个对话框,输出用户刚才输入的姓名;<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>变量的使用2</title> <script> // 1.用户输入姓名 存储到一个 myname的变量里面 var myname = promp原创 2021-03-06 19:34:36 · 284 阅读 · 0 评论 -
1.1案例:变量的使用
变量的使用有个叫卡卡西的人在旅店登记的时候前台让他填一张表,这张表里的内容要保存在电脑上,表中的内容有:姓名、年龄、邮箱、家庭住址和工资,存储之后把这些信息显示出来,所显示内容如下:我叫旗木卡卡西,我住在火影村,我今年30岁,我的邮箱是kakaxi@itcast.cn,我的工资2000<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>变量的使用</原创 2021-03-06 19:20:39 · 615 阅读 · 2 评论