侧边栏

JS实验案例

JS实验案例

<!--
<html>

<head>
<script type=" text/ javascript">

function file() {
var fso, f1;
fso=new ActiveXObject (" Scripting. FileSystemObject") ;
f1 = fso. createtextfile("C:\\1. txt ", true) ;
f1. write("这是一个文本文档");
f1. Close() ;
}
</script>

</head>

<body>
<button onclick=' file()' >创建一个文本文件</button>
</body>

</html>
-->
View Code

00猜字游戏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 320px;
height: 100px;
border: 1px solid #8A8A8A;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>0-100间的数字，点击开始进行猜数字游戏！</p>
<input type="button" value="开始" id="start" style="width: 80px;" onclick="strat_End()" />
<input type="text" id="input" value="" />
<input type="button" value="确认" id="confirm" onclick="submit_Input()" />
</div>
<script type="text/javascript">
//获取元素节点
let confirm = document.getElementById('confirm');
let start = document.getElementById('start');
let input = document.getElementById('input');
let randomNumber;
//点击开始或结束按钮触发函数
function strat_End() {
//当按键是开始,就生成随机数并保存在randomNumber中
if (start.value == "开始") {
//生成随机数
randomNumber = Math.floor(Math.random() * 100);
//用于在控制台获取生成的随机数
// console.log(randomNumber);
//点击了开始按钮后将按钮改变成结束按钮
start.value = "结束";
//当按键是结束按钮时,将randomNumber的值清除掉,便于游戏循环
} else if (start.value == "结束") {
//清除randomNumber的值
randomNumber = '';
//查看randomNumber的值是否已被清除
// console.log(randomNumber);
//将按钮转换为开始按钮,让游戏可以循环进行,按钮可以再次点击
start.value = "开始";
}
//将系统自动生成的随机数返回用于计算
return randomNumber;
}
//点击确认按键后获取输入框的值并进行判断
function submit_Input() {
//如果是在点击了开始后再点击确认按键,将获取输入框的值
if (start.value == "结束") {
//判断输入框的值是否为空
if (input.value != '') {
//输入框的值不为空，判断输入框用户输入数据的数据类型能否转换为数字类型
if (!isNaN(Number(input.value))) {
//便于保存每次用户输入的数据
// console.log(input.value);
//数据类型可以转换为数字时,将转换后的数字保存起来便于比较
let inputNumber = Number(input.value);
//调用封装的result方法,比较用户输入数据和系统生成随机数的大小
result(randomNumber, inputNumber)
} else {
//用户输入的数据类型不正确时,对用户进行提示
alert("请输入正确的数字！");
//将用户输入的错误数据自动清空
input.value = '';
}
} else {
//用户没有输入数据时点击了确认按键,对用户进行提示
window.alert("请输入数字!");
}
} else {
//当用户已经结束游戏或者第一次进入游戏就先输入了数据点击了确认按键,对用户进行提示
alert("你还没有点击开始哦！");
//如果用户输入了数据,将用户输入的数据自动清除
input.value = '';
}
}
//封装方法对用户输入的数据和用户自动生成的随机数进行比较大小
function result(randomNumber, inputNumber) {
//输入数据比随机数大
if (inputNumber > randomNumber) {
//提示用户输入数据大了
window.alert("输入数字大了！");
//清空输入的数据,便于用户再输入
input.value = '';
} 
//输入数据比随机数小
else if (inputNumber < randomNumber) {
//提示用户输入数据小了
window.alert("输入数字小了！");
//清空输入的数据,便于用户再输入
input.value = '';
} 
//输入数据与随机数相等
else {
window.alert("你猜对啦！");
//用户点击提示框确认按键后，游戏自动结束，并自动将按钮转换为开始按钮
start.value = "开始";
}
}

</script>
</body>
</html>
猜字游戏

00弹力球游戏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹力球案例</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#imgid{
width: 128px;
height: 128px;
position: absolute;
top: 0px;
left: 0px
}
#imgid img{
width: 128px;
height: 128px;
}
</style>

</head>
<body>
<div id="imgid">
<img src="img/Basketball.png" alt="#">
</div>
<script>
imgdemo=document.getElementById('imgid');
screenHeight=document.documentElement.clientHeight;//可视区域的高
screenWidth=document.documentElement.clientWidth;//可视区域的宽
imgheight=128;//图片的高
imgWidth=128;//图片的宽
Height=screenHeight-imgheight;//差值
Width=screenWidth-imgWidth;
ys=0;//初始值
yv=10;//变化值
xs=0;
xv=10;
//设置一个定时器
setInterval(function(){
//y轴
ys+=yv;//每10毫秒相加
if(ys>=Height){
ys=Height;
yv=-yv;//设置yv为负值
}
if(ys<=0){
yv=-yv;//到顶端时设置为正值
}

//x轴
xs+=xv;
if(xs>=Width){
xs=Width;
xv=-xv;
}
if(xs<=0){
xv=-xv;
}

imgdemo.style.top=ys+'px';
imgdemo.style.left=xs+'px';
document.title=ys+"-"+xs;
},10);
</script>
</body>
</html>
View Code

1.换图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
i=0;
imgid = document.getElementById("light");
imgid.onclick=function(){
if(i%2==0){
imgid.src="img/on.gif"; //换图
}else{
imgid.src="img/off.gif"; //点击换回来
}
i++;
}
</script>
</body>
</html>
View Code

2.触碰行变色

<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
*{
font-family: 微软雅黑；
}
.h{
background-color: #ccc;
}
.h:hover,h2:hover{
background-color: #999;
}
</style>
</head>
<body>
<script type="text/javascript">
for(i=1;i<8;i++){
if(i%2==0){
document.write("<h2 class='h'>"+i+"</h2><br>");
}
else{
document.write('<h2>'+i+'</h2><br>');
}
}
</script>

</body>
</html>
View Code

3.多选，反选，全选

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- <style>
*{
font-family: 微软雅黑;
margin: 0px;
padding: 0px;
}
</style> -->
</head>
<body>
<form action="javascript:">
<p>选择爱好:</p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p><label><input type="checkbox" name="">爬山</label></p>
<p>
<button id='all'>全选</button>
<button id='noall'>全不选</button>
<button id='unall'>反选</button>
</p>
</form>
</body>
<script>
all=document.getElementById('all');
noall=document.getElementById('noall');
unall=document.getElementById('unall');
objs=document.getElementsByTagName('input');
//全选
all.onclick=function(){
for(i=0;i<objs.length;i++){
objs[i].checked=true;
}
}
//全不选
noall.onclick=function(){
for(i=0;i<objs.length;i++){
objs[i].checked=false;
}
}
//反选
unall.onclick=function(){
for(i=0;i<objs.length;i++){
// if(objs[i].checked){
// objs[i].checked=false;
// }else{
// objs[i].checked=true;
// }

//三元运算符改进
//objs[i].checked=objs[i].checked?false:true;
//一元运算符
objs[i].checked=!objs[i].checked;
}
}
</script>
</html>
View Code

4.秒表

<!DOCTYPE html>

<html lang="zn">

<head>

　　<meta charset="UTF-8">

　　<title>秒表</title>

　　<style>
.contain{
width: 200px;
height: 50px;
background: #000;
border-radius: 20px;
font-weight: bold;
color: #0f0;
text-align: center;
font-size: 30px;
line-height: 50px;
}
　　</style>
</head>
<body>
<div class="contain">
<span id="Interval">10:38:00</span>
</div>&nbsp;&nbsp;<button id='pause'>暂停</button>&nbsp;&nbsp;
<button id='action'>开始</button>

　　<script>

　　　　//获取日期对象
　　　　function getDate(){

　　　　　　dobj=new Date();
　　　　　　hour = dobj.getHours();　　//时
　　　　　　minute=dobj.getMinutes(); //分
　　　　　　second = dobj.getSeconds();//秒
　　　　　　str=hour+":"+minute+":"+second;
　　　　　　dsq=document.getElementById("Interval");//获取id Interval
　　　　　　dsq.innerHTML=str;
　　}

　　　　//未点击按钮前，先执行一次
　　　　getDate();
　　　　start();

　　　　//开始函数

　　　　function start(){

　　　　　　sobj=setInterval(getDate,1000);　　//设置定时器，一秒钟执行一次getDate()
　　　　}

　　　　//停止函数

　　　　function stop(){　　

　　　　　　clearInterval(sobj);　　//清除定时器
　　　　}

　　　　//关闭按钮
　　　　c = document.getElementById("pause");
　　　　c.onclick=function(){

　　　　　　stop();
　　　　}
　　　　//开始按钮
　　　　action = document.getElementById("action");
　　　　action.onclick=function(){

　　　　　　start();
　　　　}
　　</script>
</body>

</html>
View Code

5.表单事件和鼠标事件

<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>表单事件和鼠标、键盘事件</title>
<style>
.txt{
border-style: 2px solid;

}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="get" id='fid'>
<p>用户名</p>
<input class="txt" type="text" name="name" placeholder="请输入用户名" id="input" value="java">
<input class="txt" type="text" name="name" value="javascript" id="input2">
<input class="txt" type="text" id='input3'>
<input class="txt" type="text" id='input4'>
<!-- 下拉菜单 -->
<select id='s1'>
<option placeholder="选择城市">选择城市</option>
<option value="北京">北京</option>
<option value="太原">太原</option>
<option value="南京">南京</option>
<option value="南宁">南宁</option>
<option value="天津">天津</option>
</select><br>
<h3>请确认你选择的城市：<span id="s2"> </span></h3>

<input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置">
</form>
<script type="text/javascript">
inobj=document.getElementById('input');
inobj.onfocus=function(){
this.style.outlineColor="#f00";
}
/*inobj.onblur=function(){
val=this.value;
if(val.length<6){
alert("用户名至少6位");
}
}*/
//当值改变的时候
inobj.onchange=function(){
alert("不要改变我的元素");
}
//当表单元素被选中的时候
inobj.onselect=function(){
alert('我已被选中');
}
//当表单提交的时候
fidobj=document.getElementById('fid');
fidobj.onsubmit=function(){
r = confirm('您要提交表单吗？');
if(!r){
return false;
}
}
//当表单重置的时候
fidobj.onreset=function(){
r = confirm('你要重置吗？');
if(!r){
return false;
}
}

//onchange应用下拉菜单
s1obj=document.getElementById('s1');
s2obj=document.getElementById('s2');
s1obj.onchange=function(){
s1val=this.value;
s2obj.innerHTML=s1val;
}
//获得表单焦点，全选中表单元素
inobj2=document.getElementById('input2');
inobj2.onfocus=function(){
this.select();//全选
}

//鼠标事件
//鼠标移入
inobj.onmouseenter=function(){
this.value="I love javascript";
}
//鼠标移出
inobj.onmouseleave=function(){
this.value="I love java";
}

inobj3=document.getElementById('input3');
//鼠标一移动
inobj3.onmousemove=function(){
this.style.outlineColor="#f00";
this.value="javascript";
}

//键盘事件
inobj4=document.getElementById('input4');
//键盘按下时
/*inobj4.onkeydown=function(){
alert('你按下就会触发我');
}*/
//键盘弹起时
/*inobj4.onkeyup=function(){
//alert('你弹起键盘就会触发我');
val = this.value.toUpperCase();//转成大写
this.value=val;
}*/
//键盘按下并释放一个键
inobj4.onkeypress=function(){
alert('按住我不放，我会一直弹出的喔');
}
</script>
</body>
</html>
View Code

6.回到顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部案例</title>
<style>
.fooer{
position: fixed;
bottom: 0px;
right:0px;
margin-bottom: 15px;
margin-right: 15px;
}
img{
width: 120px;
height: 130px;
cursor: pointer;
}
</style>
</head>
<body>

<div class="fooer">
<!-- <a href="#abc"> -->
<img src="img/arrive.png" alt="回到顶部" id="ar" />
</a>
</div>
<!-- 用锚点方法 -->
<!-- <a name="abc"></a> -->
<!-- sublime快速生成 h1{$$$$$$$$$}*100 再按tab键-->
<h1>0000000000000001</h1>
<h1>0000000000000002</h1>
<h1>0000000000000003</h1>
<h1>0000000000000004</h1>
<h1>0000000000000005</h1>
<h1>0000000000000006</h1>
<h1>0000000000000007</h1>
<h1>0000000000000008</h1>
<h1>0000000000000009</h1>
<h1>0000000000000010</h1>
<h1>0000000000000011</h1>
<h1>0000000000000012</h1>
<h1>0000000000000013</h1>
<h1>0000000000000014</h1>
<h1>0000000000000015</h1>
<h1>0000000000000016</h1>
<h1>0000000000000017</h1>
<h1>0000000000000018</h1>
<h1>0000000000000019</h1>
<h1>0000000000000020</h1>
<h1>0000000000000021</h1>
<h1>0000000000000022</h1>
<h1>0000000000000023</h1>
<h1>0000000000000024</h1>
<h1>0000000000000025</h1>
<h1>0000000000000026</h1>
<h1>0000000000000027</h1>
<h1>0000000000000028</h1>
<h1>0000000000000029</h1>
<h1>0000000000000030</h1>
<h1>0000000000000031</h1>
<h1>0000000000000032</h1>
<h1>0000000000000033</h1>
<h1>0000000000000034</h1>
<h1>0000000000000035</h1>
<h1>0000000000000036</h1>
<h1>0000000000000037</h1>
<h1>0000000000000038</h1>
<h1>0000000000000039</h1>
<h1>0000000000000040</h1>
<h1>0000000000000041</h1>
<h1>0000000000000042</h1>
<h1>0000000000000043</h1>
<h1>0000000000000044</h1>
<h1>0000000000000045</h1>
<h1>0000000000000046</h1>
<h1>0000000000000047</h1>
<h1>0000000000000048</h1>
<h1>0000000000000049</h1>
<h1>0000000000000050</h1>
<h1>0000000000000051</h1>
<h1>0000000000000052</h1>
<h1>0000000000000053</h1>
<h1>0000000000000054</h1>
<h1>0000000000000055</h1>
<h1>0000000000000056</h1>
<h1>0000000000000057</h1>
<h1>0000000000000058</h1>
<h1>0000000000000059</h1>
<h1>0000000000000060</h1>
<h1>0000000000000061</h1>
<h1>0000000000000062</h1>
<h1>0000000000000063</h1>
<h1>0000000000000064</h1>
<h1>0000000000000065</h1>
<h1>0000000000000066</h1>
<h1>0000000000000067</h1>
<h1>0000000000000068</h1>
<h1>0000000000000069</h1>
<h1>0000000000000070</h1>
<h1>0000000000000071</h1>
<h1>0000000000000072</h1>
<h1>0000000000000073</h1>
<h1>0000000000000074</h1>
<h1>0000000000000075</h1>
<h1>0000000000000076</h1>
<h1>0000000000000077</h1>
<h1>0000000000000078</h1>
<h1>0000000000000079</h1>
<h1>0000000000000080</h1>
<h1>0000000000000081</h1>
<h1>0000000000000082</h1>
<h1>0000000000000083</h1>
<h1>0000000000000084</h1>
<h1>0000000000000085</h1>
<h1>0000000000000086</h1>
<h1>0000000000000087</h1>
<h1>0000000000000088</h1>
<h1>0000000000000089</h1>
<h1>0000000000000090</h1>
<h1>0000000000000091</h1>
<h1>0000000000000092</h1>
<h1>0000000000000093</h1>
<h1>0000000000000094</h1>
<h1>0000000000000095</h1>
<h1>0000000000000096</h1>
<h1>0000000000000097</h1>
<h1>0000000000000098</h1>
<h1>0000000000000099</h1>
<h1>0000000000000100</h1>
</body>
<script>
//用js方法
window.onscroll=function(){
st=document.documentElement.scrollTop;//获取滚动的高
document.title=st;
arobj=document.getElementById('ar');
arobj.onclick=function(){
document.documentElement.scrollTop=0;//设置为0，回到顶部
}
}

</script>
</html>
View Code

7.正则表达式

　　1）匹配电话号码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则匹配电话号码</title>
</head>
<body>
<h1>正则匹配电话号码</h1>
</body>
<script>
phone='13876457345';
if(phone.match(/^138+(\d{8})+$/g)){
alert('电话匹配成功');
}else{
alert('匹配失败');
}
</script>
</html>
View Code

　　2）匹配邮箱

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则邮箱格式</title>
</head>
<body>
<h1>正则匹配邮箱</h1>
</body>
<script type="text/javascript">
email='1363f@qq.com'
if(email.match(/^\w+@\w+\.\w+$/i)){
alert('邮箱格式正确');
}else{
alert('邮箱格式有误');
}
</script>
</html>
View Code

　　3）替换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换</title>
</head>
<body>
<h1>替换</h1>
<script>
//有'2019/7/15'换成2019-7-15
date='2019/7/15';
time=date.replace(/(\d+)\/+(\d+)\/+(\d)/g,"$1-$2-$3");
alert(time);
</script>

</body>
</html>
View Code

8.闭包

闭包的定义：在一个函数的内部有一个返回的函数，内部的函数使用外部函数的变量，通过returnf返回，内部函数被抛到外部，导致这个变量没有被释放回收。（相当于全局变量）。

闭包切换图片的简单应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box>span{
display: inline-block;
width: 100px;
background: #faa;
height: 50px;
color:#fff;
font-size:24px;
text-align: center;
line-height: 50px;
}
#box>span:hover{
background: orange;
}
img{
display: none;
}
</style>
</head>
<body>
<div id="box">
<span>图1</span>
<span>图2</span>
<span>图3</span>
</div>
<img src="路径" alt="图1" >
<img src="路径" alt="图2" >
<img src="路径" alt="图3" >
<script type="text/javascript">
window.onload=function(){
//获取box的子
var boxs=document.getElementById('box').children;
for(var i=0;i<boxs.length;i++){
boxs[i].onclick=function(){
var k=i;
return function(){
var imgobj=document.getElementsByTagName('img');
//把所有的图片隐藏
for(var j=0;j<imgobj.length;j++){
imgobj[j].style.display='none';
}
//显示当前点击的图片
imgobj[k].style.display='block';
}; 
}();
}
}
</script>
</body>
</html>
View Code

9.控制图片走动

通过event.clientX和event.clientY来获取鼠标移动的坐标

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动图片</title>
<style>
img{
position: absolute;
top:0px;
left: 0px;
}
</style>
</head>
<body>

<img id="light" src="img/69.png">

<script>
imgobj=document.getElementById('light');
//鼠标移动改变标题
//document.onmousemove=function(){
// document.title='你还好吗';
//}
//移动鼠标显示像素
//document.onmousemove=function(event){
// x=event.clientX;
// y=event.clientY;
// document.title=x+"-"+y;
//}
//移动图片
document.onmousemove=function(event){
x=event.clientX;
y=event.clientY;
imgobj.style.top=x+"px";
imgobj.style.left=y+"px";
}

</script>
</body>
</html>
View Code

10.ajax

ajax是处理前端和后端数据的通讯，是一种无须加载完整个页面实现网页部分刷新的技术，同时和定时器、框架、一样也是实现异步的一种方式。在客户端请求ajax时，ajax处理数据有可能会失败，所以有一种失败的状态，在jquery框架中ajax更加的清晰。

js中写ajax的步骤

1.声明一个xhr对象

2.打开发射器open

3.声明请求头

4.发射（发射器发射）

5.处理状态（等待ajax处理）

模拟请求百度的ajax,具体代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">

</div>
<script type="text/javascript">
var box = document.getElementById('box');
// 1.声明
var xhr=new XMLHttpRequest();
// 2.发射器(参数1：发送数据的方式，参数2：接口地址，参数3：false(同步),true(异步))
xhr.open('get','http://wwww.baidu.com',true);
// 3.设置请求头类型
//xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4.发送数据
xhr.send();
// 5.状态
box.innerHTML='加载中...'
xhr.onreadystatechange=function(){
setInterval(function(){
if(xhr.status==200&&xhr.readyState==4){
//(readyState)五种准备状态 0:未发送 1:已发送 2:已收到 3:正在处理 4:处理完毕
//(status)三种结果状态 200:成功 0:失败 404:服务器未找到
box.innerHTML='加载完毕'
} 
},1000);
}

</script>
</body>
</html>
View Code

通过请求百度的接口，模拟请求的时间，如果浏览器（谷歌）出现了：No 'Access-Control-Allow-Origin'这种错误，说明浏览器需要降级

点击浏览器鼠标右键属性：在地址的最后面空格再添加--disable-web-security --user-data-dir=c:\

c表示浏览器所在的盘符

posted @ 2020-10-13 18:35  菜鸟-传奇  阅读(297)  评论(0)  编辑  收藏  举报