前端JS-22

最新推荐文章于 2022-11-30 09:25:37 发布
最新推荐文章于 2022-11-30 09:25:37 发布
阅读量141 收藏
点赞数
分类专栏： 笔记 学习 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53950248/article/details/120682414
版权

目录

定时器的应用(一)

定时器的应用（二）

定时器的应用(三)

轮播图界面

点击按钮切换图片

完成轮播图

类的操作

定时器的应用(一)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color:red ;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取box1
				var box1=document.getElementById("box1");
				//获取btn01
				var btn01=document.getElementById("btn01");
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				//点击按钮以后，使box1向右移动(left值增大)
				btn01.onclick=function(){
					
					//开启一个定时器。用来执行动画效果
					setInterval(function(){
						
						//获取box1的原来的left值
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						alert(oldValue);
						
						//开启一个定时器，用来执行动画效果
						var timer=setInterval(function(){
							//获取box1的原来的left值
							
							//关闭上一个定时器
							clearInterval(timer);
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue=oldValue+19;
						
						//判断newValue是否大于800
						if (newValue>800) {
							newValue=800;
						}
						
						//将新值设置给box1
						box1.style.left=newValue+"px";
						
						//当元素移动到800px时，使其停止执行动画
						if (newValue>=800) {
							//达到目标，关闭定时器
							clearInterval(timer);
						}
					},30);
				};
			};
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数:
			 * obj 要获取样式得到元素
			 * name 要获取的样式名
			 */
			function getStyle(obj,name){
				
				if (window.getComputedStyle) {
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj,null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				}
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后box1向右移动</button>
		
		<br /><br />
		<div id="box1"></div>
		
		<div style="width: 0;height: 1000px;border-left:1px;black solid;position: absolute;top: 0;"></div>
	</body>
</html>

定时器的应用（二）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color:red ;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取box1
				var box1=document.getElementById("box1");
				//获取btn01
				var btn01=document.getElementById("btn01");
				
				//获取btn02
				var btn02=document.getElementById("btn01");
				
				
				//点击按钮以后，使box1向右移动(left值增大)
				btn01.onclick=function(){
					
					//开启一个定时器。用来执行动画效果
					setInterval(function(){
						
						//获取box1的原来的left值
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						alert(oldValue);
						
						//开启一个定时器，用来执行动画效果
						var timer=setInterval(function(){
							//获取box1的原来的left值
							
							//关闭上一个定时器
							clearInterval(timer);
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue=oldValue+19;
						
						//判断newValue是否大于800
						if (newValue>800) {
							newValue=800;
						}
						
						//将新值设置给box1
						box1.style.left=newValue+"px";
						
						//当元素移动到800px时，使其停止执行动画
						if (newValue>=800) {
							//达到目标，关闭定时器
							clearInterval(timer);
						}
					},30);
				};
				
				
				//点击按钮以后，使box1向左移动(left值减小)
				btn02.onclick=function(){
					move(box1,0,-10);
					
			};
			//定义一个变量，用来保存定时器的标识
				var timer;
			//尝试创建一个可以执行简单动画的函数
			
			/*
			 * 参数:
			 * obj:要执行动画的对象
			 * target:执行动画的目标位置
			 * speed:移动的速度(正数向右移动，负数向左移动)
			 */
			function move(obj,target,speed){
				//关闭上一个定时器
							clearInterval(timer);
							
							//获取元素目前的位置
							var current=parseInt(getStyle(obj,"left"));
							
							//判断速度的正负值
							//如果从0向800移动，则speed为正
							//如果从800向0移动，则speed为负
							if(current>target){
								//此时速度应为负值
								speed=-speed;
							}
						
						var oldValue=parseInt(getStyle(obj,"left"));
						
						//在旧值的基础上增加
						var newValue=oldValue+speed;
						
						//判断newValue是否大于800
						//从800向0移动
						//向左移动时，需要判断newValue是否小于target
						//向右移动时，需要判断newValue是否大于target
						if ((speed<0&&new Value<target)||(speed>0&&newValue>target)) {
							newValue=target;
						}
						
						//将新值设置给box1
						obj.style.left=newValue+"px";
						
						//当元素移动到800px时，使其停止执行动画
						if (newValue=0) {
							//达到目标，关闭定时器
							clearInterval(timer);
						}
			}
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数:
			 * obj 要获取样式得到元素
			 * name 要获取的样式名
			 */
			function getStyle(obj,name){
				
				if (window.getComputedStyle) {
					//正常浏览器的方式，具有getComputedStyle()方法
					return getCompu
最低0.47元/天 解锁文章
画个圈圈诅咒你 yebo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发-js-视频播放时长实时记录
04-10
自己写的一个用于记录视频播放时长的js，通过video标签的事件处理实现，文末有使用示例，引入即用。
javascript事件点击
weixin_45568677的博客
04-09 269
题目：五张图片通过普通按钮点击切换下一张，上一张。 <img src="1.jpg">这是图片 <button>点击切换下一张</button> 按钮 <button id="qwe">点击切换上一张</button> 按钮 接下来是链接上面的按钮 <script> 把所有功能封装到一个函数里面去 function fn(){ 我们再创建一个变量来接收,返回的伪数组。 document.getElementsByTagName
JS访问Web页面的元素
Abel_01_xu的博客
12-04 608
1. 访问特定元素      document.getElementById('id') 2. 根据元素名访问      document.getElementsByTagName('img')      值得注意的是，上述返回的是一个类数组NodeList，他是一个特殊的集合，动态的集合，不是一个Array对象，因此不能对其使用数组方法，例如push()等。NodeList的唯一属性是l...
如何实现网页中按钮的自动点击？
生物医学信息学博客
06-25 3万+
背景： 经常会遇到秒杀抽奖类的活动，到点在网页上点按钮进行秒杀，但是鼠标连点起来会很麻烦，因此考虑写点代码实现自动化。 方法： 使用Chrome浏览器，右击目标按钮，点击“检查”，有的浏览器也叫“审查元素”，找到目标按钮的id，例如百度的按钮是： <input type="submit" id="su" value="百度一下" class="bg s_btn"> 此处id就是su。 在console中，粘贴如下代码行： setInterval(function(){document.getEl
python触发点击事件_如何让一个按钮自动触发,自动执行onclick鼠标单击事件. 默认已点击....
weixin_39710594的博客
12-04 4068
展开全部按钮自动触发onclick事件，可以使用定时器setInterval()方法62616964757a686964616fe78988e69d8331333366306563实现。默认已点击，可以在加载网页的时候使用onload方法实现一次点击。以下例子，实现网页打开时默认弹出弹窗，在关闭弹窗后，每2秒钟自动点击一次弹出弹窗，完整的代码如下：自动点击例子setInterval(functio...
JavaScript之网页页面上实现自动点击
Quincy.Coder的博客
05-19 4758
setInterval(function(){document.getElementById(“单击按钮的Id”).click();},1000);
前端js-table-点击列名字段排序
最新发布
01-30
前端js-table-点击列名字段排序
xlsx-js-style导出Demo,纯前端带样式导出表格数据
09-01
纯前端导出,xlsx.js只能导出不能携带样式，所以我们用了xlsx-js-style插件,可以实现带样式的前端导出表格,样式可自定义，表格背景颜色、字体颜色、表格行高、表格行宽等等都可以自行设置，导出速度快，实现可以自己...
前端项目-js-sha256.zip
09-03
前端项目-js-sha256,Javascript的一个简单的sha-256/sha-224哈希函数支持UTF-8编码。
前端js-淘宝广告.rar
08-01
前端js-淘宝广告.rar
原生js轮播图练习
weixin_59357486的博客
08-31 126
原生js轮播图练习。
深入浅出JS—22事件循环及面试题
分享前端知识，记录前端进阶
05-19 876
介绍浏览器和Node两种环境下的JS事件循环，包括宏任务、微任务的划分，以及优先级；列举常见面试题，对深入理解事件循环机理和通过面试都很有帮助
js-22同源策略
Charlotte_99的博客
11-30 940
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGDnD5Mp-1669771511418)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649307607396.png)]实现原理: 动态构造script标签，将请求url接口地址作为script属性src值。callBack 由后端提供。//动态创建script标签。
JS单击事件
qq_35354139的博客
07-29 1994
JS单击事件
杂记（2）JS脚本自动点击页面按钮
热门推荐
鱼多多
06-26 3万+
一、背景说明我一直觉得写程序、写算法、会编程这些我们程序员赖以生存的技能，应该更多的为我们自己服务，而不仅仅成为我们被企业压榨的工具。简而言之，我们的编程技能不要仅仅为了找工作、面试、干领导布置下来的任务，而应该让这种技能更多的为我们自己服务。下面我要分享一个我自己的经历，代码很短，但确实是为我自己提供了便利。我们公司所在的园区提供一站式班车服务，每天我们通过微信公众号的抢票页面，在规定的时间内抢...
页面自动点击
qq_41621512的博客
04-11 1615
给一个条件判断，然后让页面自动点击id为num1的元素。 var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); document.getElementById("num1").dispatchEvent(e); ...
三、Web：JS
weixin_42834609的博客
10-11 334
一、JavaScrip 组成 1.1： JS的组成：ECMAScrip、DOM、BOM 1.2： ECMAScrip，描述了该语言的语法和基本对象 1.3： 文档对象模型（DOM），规定了文档的显示结构，可以轻松的删除、添加和替换节点，DOM是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层构成的文档，HTML或XML页面的每个部分都是一个节点的衍生物。 1.4：...
JS22 函数的上下文
inexaustible的博客
12-08 212
题目描述 将函数 fn 的执行上下文改为 obj 对象 示例1 输入 function () {return this.greeting + ', ' + this.name + '!!!';}, {greeting: 'Hello', name: 'Rebecca'} 输出 Hello, Rebecca!!! javascript function speak(fn, obj) { return fn.call(obj) } 在JS中，this的指向是动态变化的，很可能...
前端crypto-js 加密方式
07-08
在前端使用`crypto-js`库进行加密的方式有多种。以下是几种常见的加密方式： 1. MD5加密：使用`CryptoJS.MD5`方法对数据进行MD5哈希加密。 ```javascript const CryptoJS = require('crypto-js'); const data = 'exampleData'; const encrypted = CryptoJS.MD5(data).toString(); console.log(encrypted); ``` 2. SHA加密：使用`CryptoJS.SHA256`、`CryptoJS.SHA512`等方法对数据进行SHA哈希加密。 ```javascript const CryptoJS = require('crypto-js'); const data = 'exampleData'; const encrypted = CryptoJS.SHA256(data).toString(); console.log(encrypted); ``` 3. AES加密：使用`CryptoJS.AES.encrypt`方法对数据进行AES对称加密。 ```javascript const CryptoJS = require('crypto-js'); const data = 'exampleData'; const key = 'exampleKey'; const encrypted = CryptoJS.AES.encrypt(data, key).toString(); console.log(encrypted); ``` 4. DES加密：使用`CryptoJS.DES.encrypt`方法对数据进行DES对称加密。 ```javascript const CryptoJS = require('crypto-js'); const data = 'exampleData'; const key = 'exampleKey'; const encrypted = CryptoJS.DES.encrypt(data, key).toString(); console.log(encrypted); ``` 请注意，在使用这些加密方式时，确保在前端和后端使用相同的加密算法和密钥来确保正确的解密结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值