<script>
//js代码
for (var i = 0; i < 5; i++) {
document.write("hello World" + i + "
")
}
script>
<input type="button" value="按钮" onclick="alert('Hello World')">
注意:
如果引入了外部IS文件,这个标签中的IS代码是无效的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
//ES5定义变量
var a = 10;
document.write(a + "
");
//ES6定义变量
let b = 30;
document.write(b + "
");
//常量(不能修改)
const c=50;
document.write(c + "
");
//JS是弱类型语言:一个变量可以赋值为不同的数据类型(可以乱来)
let m=10;
m=true;
m="我就是要乱来";
document.write(m + "
");
//ES6中反引号字符串(模板字符串)``
//目的是要输出10+20=30;
let x=10;
let y=20;
document.write(x+"+"+y+"="+(x+y) + "
");
document.write(`${x}+${y}=${x+y}` + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5种数据类型title>
head>
<body>
<script>
//number:数值型,整数和小数都行
let n1 = 10;
document.write(typeof (n1) + ":" + n1 + "
");
let n2 = 6.66;
document.write(typeof (n2) + ":" + n2 + "
");
//boolean:true/false
let a = true;
document.write(typeof (a) + ":" + a + "
");
//string:字符串 在is中""包裹的内容和’’包裹的内容都是字符串,
let b1 = "今天学js好轻松啊!";
document.write(typeof (b1) + ":" + b1 + "
");
let b2 = '今天学js好轻松啊!';
document.write(typeof (b2) + ":" + b2 + "
");
//object:对象类型
// Js内置的对象Array
let obj1 = new Array(2, 3, 4);
document.write(typeof (obj1) + ":" + obj1 + "
");
// 自定义JS对象:{键1:值1,键2:值2}
let obj2 = {"name": "张三", "age": 18};
document.write(typeof (obj2) + ":" + obj2 + "
");
//null表示对象类型,null是obiect类型的默认值,
let obj3 = null;
document.write(typeof (obj3) + ":" + obj3 + "
");
// undefine:未定义 没有给变量赋值
let x;
document.write(typeof (x) + ":" + x + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串转化数字title>
head>
<body>
<script>
let a = "5"; // "5" -> 5
let b = "6";
document.write(a + b + "
"); // 56
//将字符串转成整数"5"->5 Java使用Integer.parseInt("5")-> 5;
// parseInt():将字符串转成数字
document.write(parseInt(a) + parseInt(b) + "
");
//parseInt能转多少算多少
document.write(parseInt("123gvhbgf") + "
");
//如果一个都转不了,得到NaN(Not aNumber不是一个数字)
document.write(parseInt("sdgdrs") + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例title>
head>
<body>
<script>
/*prompt(message, _default):表示网页的输入框
message:提示语,给用户看
_default:默认值
返回值:用户输入的数据,是string类型*/
var score = prompt("请输入您的分数", 60);
document.write(typeof (score) + ":" + score + "
");
var score = parseInt(score);
document.write(typeof (score) + ":" + score + "
");
// var score = prompt("请输入您的分数", 60);
// document.write(typeof (parseInt(score)) + ":" + score + "
");
// 通过prompt输入的分数,如果90~100之间,输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出不及格
switch (true){
case score>=90&& score<=100:
document.write("优秀" + "
");
break;
case score>=80&& score<90:
document.write("良好" + "
");
break;
case score>=60&& score<80:
document.write("及格" + "
");
break;
case score>=0&& score<100:
document.write("不及格" + "
");
break;
default:
document.write("分数输入有误" + "
");
}
script>
body>
html>
通过id获取一个元素(标签)
window.setInterval(“函数名()”,时间)
每隔一段时间自动调用一次指定的函数,时间是毫秒
window.setlnterval(函数名,时间)
另一种写法,功能同上
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器title>
head>
<body>
<style>
div {
width: 600px;
margin: auto;
}
style>
<div>
<img id="image" src="../img/0.jpg" width="600px"/>
div>
<script>
//调用这个shijian这个函数,每隔1000毫秒调用一次;
//setInterval(函数名,时间间隔):定时器,每个指定时间执行一次前面的函数(反复执行)
setInterval(shijian, 3000);
//定义全局变量num=1;下一张图片的名字
let num = 1;
function shijian() {
//在shijian的方法中,设置图片的src属性为../img/num.jpg
document.getElementById("image").src = "../img/" + num + ".jpg";
//num++,判断num是否等于2,如果等于或者大于2.则重置为0;
num++
if (num >= 2) {
num = 0;
}
}
//创建一个函数,打印hello和时间
// function shijian() {
// document.write("hello" + new Date() + "
");
// }
script>
body>
html>
用户可以对网页的元素有各种不同的操作:如 单击,双击,鼠标移动等这些操作就成为事件,事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行
设置事件的两种方式:
命名函数
通过标签中的事件属性进行绑定
匿名函数
通过DOM元素属性绑定
document.getElementById("btn").onclick = function(){
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击事件title>
head>
<body>
<from>
姓名1:<input id="input1" name="username1"/><br/>
姓名2:<input id="input2" name="username2"/><br/>
<input type="button" value="鼠标双击复制" ondblclick="copy()">
from>
<script>
//双击复制
function copy() {
//1.得到第一个输入框的内容,value就是输入框输入的内容
let str= document.getElementById("input1").value;
//2.将内容赋值给第二个输入框
document.getElementById("input2").value=str;
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>得到失去焦点事件title>
head>
<style>
#msg {
color: red;
}
style>
<body>
用户名:<input type="text" id="a1" onfocus="f1()" onblur="f2()"> <span id="msg">请输入span>
<script>
//输入框得到焦点的事件
function f1(){
//把提示文字改成"正在输入"
// innerTest设置标签的主体内容的文字
document.getElementById("msg").innerText="正在输入"
}
//输入框失去焦点的事件
function f2(){
//把提示文字改成"请输入"
document.getElementById("msg").innerText="请输入"
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>值改变大写title>
head>
<body>
英文1:<input type="text" id="input1"><br/>
英文2:<input type="text" id="input2"><br/>
<script>
//找到第一个输入框设置改变的事件
//onchange:值改变事件,输入框的值改变了就会触发这个函数
document.getElementById("input1").onchange = function () {
//1.得到输入框的内容
var str = document.getElementById("input1").value;
//2.将得到的内容转化为大写并赋值给第二个输入框;
//toUpperCase:转化为大写
document.getElementById("input2").value = str.toUpperCase();
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页加载完显示事件title>
<script>
//window.onload:网页加载完成时调用
window.onload = function () {
alert("网页加载完...")
}
script>
head>
<body>
<h3>我是h3h3>
<h3>我是h3h3>
<h3>我是h3h3>
<h3>我是h3h3>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的四种创建方式title>
head>
<body>
<script>
//JS创建数组的四种方式//Array是JS中内置的对象
// 方式一:创建一个长度为0的数组 (一个数字表示数组的长度)
let arr1 = new Array();
document.write(arr1 + "
");
// 方式二:创建一个长度为5的数组,没有数据
let arr2 = new Array(5);
document.write(arr2 + "
"); //,,,,
//方式三:创建数组,保存指定的数据 (多个数字表示数组的内容)
let arr3 = new Array(11, 22, 33); //11,22,33
document.write(arr3 + "
");
// 方式四:创建数组,保存指定的数据*****
let arr4 = [44, 55, 66, 77]; //44,55,66,77
document.write(arr4 + "
");
//修改数组数据:数组名[索引]
arr4[1] = 666;
document.write(arr4 + "
"); //44,666,66,77
//获取数组数据:数组名[索引]
document.write(arr4[3] + "
"); //77
//1.数组中元素的类型可以不同(了解)
let arr5 = [10, true, "随便", 6.66] //数据类型可以不同:10,true,随便,6.66
document.write("数据类型可以不同:" + arr5 + "
");
//2.长度可以动态变化//数组添加数据// 数组删除元素
arr5.push("新增数据"); //新增数据:10,true,随便,6.66,新增数据
document.write("新增数据:" + arr5 + "
");
arr5.pop() //删除数据:10,true,随便,6.66
document.write("删除数据:" + arr5 + "
");
//3.数组中还有方法
//reverse:将数组内容反转
arr5.reverse(); //翻转后的数组:6.66,随便,true,10
document.write("翻转后的数组:" + arr5 + "
");
// concat:将两个数组合成一个数组
let arr7 = [1, 2, 3, 4];
let arr6 = [5, 6, 7, 8];
let arr8 = arr7.concat(arr6); //合并后的数组:1,2,3,4,5,6,7,8
document.write("合并后的数组:" + arr8 + "
");
//join:将数组中的元素根据参数拼接成字符串
let str = arr6.join("+"); //拼接字符串:5+6+7+8
document.write("拼接字符串:" + str + "
");
// sort排序
//数组中是字符串,排序规则:根据字符串的首字母ASCTT码值排序,如果首字母相同,根据下一个字母的ASCTT码值来排序
var arr10 = ['z', 'ac', 'ab', 'x', 'AB', "B"];
var str1 = arr10.sort(); //排序后:AB,B,ab,ac,x,z
document.write("排序后:" + str1 + "
");
var arr11 = [100, 9, 46, 20]; //数字排序后:100,20,46,9
//数组中是数字,将数字转成字符串,然后按照字符串的规则排序
document.write("数字排序后:" + arr11.sort() + "
");
//自定义排序,按照数字从小到大排序
arr11.sort(function (a, b) {
return a - b;
}) //自定义排序后:9,20,46,100
document.write("自定义排序后:" + arr11 + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期时间title>
head>
<body>
<script>
//创建日期对象,时间是执行这行代码的时间(当前时间)
let date = new Date();
document.write(date + "
"); //Sat Apr 23 2022 21:18:08 GMT+0800 (中国标准时间)
//得到年份
document.write("当前的年份:" + date.getFullYear() + "
");
//得到星期
//得到星期:0表示周日,1^6表示周一到周六
document.write("当前的星期:" + date.getDay() + "
");
//得到毫秒值
document.write("当前的毫秒值:" + date.getTime() + "
");
//得到本地格式的时间(根据我的操作系统语言,转成对应国建的通用时间格式)
document.write("当前的本地系统时间:" + date.toLocaleString() + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作csstitle>
head>
<body>
<style>
.more{
color: red;
font-size: 90px;
font-family: 新蒂黑板报底字;
}
style>
<h1 id="first"> 我是一个h1 h1>
<h1 id="second">我是一个h1h1>
<input type="button" value="JS一次修改单个css样式" onclick="changeOne()"/><br/>
<input type="button" value="JS一次修改多个css样式" onclick="changeMore()"/><br/>
<script>
//JS一次修改单个CSS样式
//标签对象.style.样式名="样式值"
//css的样式名多个单词使用-连接:font-size,js使用的是驼峰式命名:fontSize:
function changeOne() {
document.getElementById("first").style.color="red";
document.getElementById("first").style.fontSize="60px";
}
//JS一次修改多个CSS样式
function changeMore() {
//找到标签,添加一个class属性
document.getElementById("second").className="more";
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象title>
head>
<body>
<input type="button" value="点我刷新" onclick="location.reload()"/><br/>
<script>
//location的href属性:获取地址栏的所有内容
document.write(location.href + "
");
//location的href属性:修改地址栏的所有内容(可以跳转网页)
//location.href="http://www.jd.com";
//location的search属性:获取地址栏中?及以后的数据
document.write(location.search + "
");
//location是window的属性可以省略window
// location的href属性可以省略
document.write(window.location.href + "
");
document.write(location.href + "
");
document.write(location + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history前进后退历史记录title>
head>
<body>
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="后退哦" onclick="history.back()">
<a href="js日期.html" >点a>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三个框title>
head>
<body>
<script>
//提示框:(只有确定按钮)
window.alert("你喜欢我么?")
//输入框:(可以输入数据,有确定和取消按钮),点击确定得到输入框的内容,点击取消得到null;
let a = window.prompt("你喜欢我么?", "喜欢")
document.write(a + "
");
//确认框:(只有确定和取消按钮),点击确定得到true,点击取消得到false
let b = window.confirm("是真的么?")
document.write(b + "
");
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时跳转页面title>
head>
<body>
<span id="time">5span>秒后进行跳转
<script>
//定义全局变量为5;
let num=5;
//每过一秒调用一次自定义的f()函数
let timer = setInterval(f,1000);//setInterval返回值就是计时器
//定义f()函数,时间-1,修改span中的数字
function f() {
num--;
document.getElementById("time").innerText=num;
//判断时间=0,则跳转新页面
if(num==0){
window.location.href="http://www.jd.com";
clearInterval(timer);//停止计时器
}
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格行换颜色title>
head>
<body style="margin: 50px;">
<table border="1" width="1000">
<tr style="background-color: #999;">
<th><input type="checkbox" name="chekbox">th>
<th>分类IDth>
<th>分类名称th>
<th>分类描述th>
<th>操作th>
tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox">td>
<td>1td>
<td>手机数码td>
<td>手机数码类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox">td>
<td>2td>
<td>电脑办公td>
<td>电脑办公类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox">td>
<td>3td>
<td>鞋靴箱包td>
<td>鞋靴箱包类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox">td>
<td>4td>
<td>家居饰品td>
<td>家居饰品类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
1.定义一个提交按钮:点击按钮即可变换颜色
<input type="button" value="点击添加颜色" onclick="huan()"><br/>
2.定义一个提交按钮:点击按钮即可全选中复选框
<input type="button" value="点击全选复选框" onclick="xuan()"><br/>
3.定义一个提交按钮:点击按钮即可给传智播客添加跳转链接
<input type="button" value="点击给传智播客添加链接" onclick="jia()"><br/>
<a class="company">传智播客a><br/>
<a class="company">传智播客a><br/>
<a class="company">传智播客a><br/>
<script>
//1.(通过标签名)给tr的奇偶数行添加背景颜色:byTagName
function huan() {
//通过tr标签找到所有的tr标签
let tr1 = document.getElementsByTagName("tr");
//设置背景颜色
for (let i = 0; i < tr1.length; i++) {
if (i % 2 == 0) {
tr1[i].style.backgroundColor = "red";
} else {
tr1[i].style.backgroundColor = "blue";
}
}
}
//2.(通过name属性)选中所有商品:byName
function xuan() {
//通过name属性的值找到标签
let cheboxx = document.getElementsByName("chekbox");
for (let cheboxx1 of cheboxx) {
//让他选中:在input标签里面让属性checked="checked"就选中啦,在js中能够要让checked=true就会选中;
cheboxx1.checked = true;
}
}
//3.(通过类名)给a标签添加链接:byClassName
function jia() {
//通过class值找到所有的a标签
let className = document.getElementsByClassName("company");
for (let classNameElement of className) {
//给所有a标签设置href属性;
classNameElement.href="http://www.jd.com";
}
}
script>
table>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息系统title>
<style>
div {
width: 500px;
margin: auto;
}
td {
text-align: center;
}
style>
head>
<body>
<table border="1px" width="500px" cellspacing="0px" cellpadding="5px" align="center">
<tr>
<th>
<input id="daGe" type="checkbox" onclick="checkAll()">
th>
<th>学号th>
<th>姓名th>
<th>操作th>
tr>
<tr>
<td>
<input class="xiaoDi" type="checkbox" >
td>
<td>001td>
<td>潘金莲td>
<td>
<input type="button" value="删除" onclick="deleteStudent(this)">
td>
tr>
<tr>
<td>
<input class="xiaoDi" type="checkbox" >
td>
<td>002td>
<td>鲁智深td>
<td>
<input type="button" value="删除" onclick="deleteStudent(this)">
td>
tr>
table>
<div>
学号:<input id="inputNumber">
姓名:<input id="inputName">
<input type="button" value="添加" onclick="addStudent()">
div>
<script>
//添加的实现
function addStudent() {
//得到文本框的文本
let number = document.getElementById("inputNumber").value;
let name = document.getElementById("inputName").value;
//判断如果输入内容为空则返回提示
if (number == "" || name == "") {
alert("录入信息不能为空!")
return;
}
//创建tr节点
let tr = document.createElement("tr");//相当于生成
//将这行内容使用innerHTML直接设置到tr内部
tr.innerHTML = "\n" +
" \n" +
" \n" +
" " + number + " \n" +
" " + name + " \n" +
" \n" +
" \n" +
" \n" +
" "
//浏览器会自动给table表格添加一个tbody,所有的tr都在tbody中;
//找到浏览器自动添加tbody标签 数组[索引]
let tbody = document.getElementsByTagName("tbody")[0];
//把tr追加到表格中
tbody.appendChild(tr);
//清空输入框的内容
document.getElementById("inputNumber").value = "";
document.getElementById("inputName").value = "";
}
//删除的实现
function deleteStudent(clickBtn) {
//提示,二次确认
let b = confirm("您真的要删除该数据吗?");
//如果确定就从父元素的父元素删除本身(爷爷自杀)
if (b) {
clickBtn.parentElement.parentElement.remove();
}
}
//全选的实现
function checkAll(){
//得到最上面的复选框状态:.checked;
let checked = document.getElementById("daGe").checked;
//得到下面所有复选框
let xiaoDis = document.getElementsByClassName("xiaoDi");
//遍历数组得到每个复选框
for (let xiaoDi of xiaoDis) {
//把下面xiaoDi所有复选框的状态和daGe的同步
xiaoDi.checked=checked;
}
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式验证title>
<style>
.left {
text-align: right;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
style>
head>
<body>
<form action="aa" method="post" id="myform" onsubmit="return checkAll()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名:td>
<td class="center">
<input id="user" name="user" type="text" class="in" onchange="isUser()"><span id="user_sp"
class="error">span>
td>
tr>
<tr>
<td class="left">密码:td>
<td class="center">
<input id="pwd" name="pwd" type="text" class="in">
td>
tr>
<tr>
<td class="left">确认密码:td>
<td class="center">
<input id="ispwd" name="ispwd" type="text" class="in">
td>
tr>
<tr>
<td class="left">电子邮箱:td>
<td class="center">
<input id="email" name="email" type="text" class="in">
td>
tr>
<tr>
<td class="left">手机号码:td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" onchange="ismobile()"><span id="mobile_is"
class="error">span>
td>
tr>
<tr>
<td class="left">生日:td>
<td class="center">
<input id="birth" name="birth" type="text" class="in" onchange="isbirth()"><span id="birth_is"
class="error">span>
td>
tr>
table>
form>
<script>
function isUser() {
let userName = document.getElementById("user").value;
let zuser = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
let b = zuser.test(userName);
if (b) {
//如果匹配,在后面的span中显示一个图片
document.getElementById("user_sp").innerHTML = ""
} else {
//如果匹配,在后面的span中显示一个图片
//用户名不对-- >
document.getElementById("user_sp").innerText = "用户名不对";
}
return b;
}
function ismobile() {
let mobile = document.getElementById("mobile").value;
let ismobile = /^1[3456789][1234567890]{9}$/;
let b = ismobile.test(mobile);
if (b) {
//如果匹配,在后面的span中显示一个图片
document.getElementById("mobile_is").innerHTML = ""
} else {
//如果不匹配,在后面的span中显示错误信息
document.getElementById("mobile_is").innerText = "手机号格式不对";
}
return b;
}
function isbirth() {
}
//检测所有
function checkAll() {
//只有用户名验证为true && 手机号为true,结果才为true
return isUser() && ismobile();
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式title>
head>
<body>
<script>
// 正则表达式的创建方式一:实例创建方式(创建正则表达式对象)
//格式:let 变量名 =newRegExp("正则表达式规则");
let regl = new RegExp("1[3456789]\\d{9}");//需要两个//
//正则表达式的创建方式二(建议使用):字面量创建方式(直接给一个正则表达式)
// 格式:let 变量名 = /正则表达式规则/;
let reg2 = /1[3456789]\d{9}/;//需要一个/
//在js中正则表达式必须使用^开头,$结尾,才能严谨的匹配
let reg3 = /^1[3456789]\d{9}$/;//需要一个/
//正则表达式的使用格式:正则表达式对象.test("要匹配的内容")
//js只要部分匹配即为true;
let b = reg2.test("13838389438");
alert(b);
script>
body>
html>