11JavaScript/day02/basic02.html · ZMRSoft/Python24

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 4

ZMRSoft/Python24

forked from 空无一物/Python24

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

文件

master

分支 (4)

管理

master

dependabot/pip/django-2.2.13

gh-pages

dependabot/pip/pillow-6.2.0

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

分支 4

标签 0

Python24

11JavaScript

day02

basic02.html

basic02.html 4.15 KB

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>

var oTimer = null;

btn1.onclick = function () {
 setTimeout(() => {
 console.log("3s的时间到了.");
 }, 3000);
 }

btn2.onclick = function () {
 oTimer = setInterval(() => {
 console.log("......");
 }, 1000);
 }

btn3.onclick = function () {
 clearInterval(oTimer)
 oTimer = null;
 }

}

function func2() {
 var box = document.getElementById("box")
 var btn = document.getElementById("btn4")
 var num = 0;
 var speed = 5;
 var oTimer = setInterval(() => {
 // box.left += 10; 不能直接这样,修改css的left需要使用style
 num += speed;
 // 当num=800的时候,进行反向运动
 if (num >= 800) {
 speed = -5
 }

if (num <= 0) {
 speed = 5;
 }

box.style.left = num + "px";
 }, 50);

btn.onclick = function () {
 clearInterval(oTimer)
 oTimer = null
 }
 }

function func3() {
 // 1- 轮播图的原理父类有一个div显示区域,里面有ul,ul里面的动态生成li,进行innerHTML的li标签拼接
 // 2- 不断的改变某个标签(控制所有的产品,选中父类的ul)的left取值,多次定时
 // 3- 当ul在父类div滚动的时候,超过位置就自动隐藏了
 // 4- 无缝拼接的话,原理是显示区域可以显示5个产品,复制一份的目的是,总共10个li标签,保证移动时候,显示区域是由替补的产品替换
 // 5- 一直左侧移动的话会漏孔,防止的话,当第十个li到达显示区域的最右边的话,那么直接left回到0,显示第一个li标签
 // 6- 判断的条件就是就是ul的left是否到达10个li的中间,也就是显示区域刚好开始显示第6个li, if num = 负的显示区域宽度
 // 7- 点击向右的箭头时,ul会向左移动,防止右侧镂空,则ul的left = 负的显示区域宽度时候,将left = 0
 // 点击向左的箭头时,ul会向右移动,防止左侧镂空,则ul的left = 0,将left = 负的显示区域宽度 
 }

func2()

}
 
 </script>

/*  */
 position: fixed;
 left: 0;
 top: 50;
 }
 
 </style>

</head>
<body>

<button id="btn1">单次定时</button>
 <button id="btn2">多次循环定时</button>
 <button id="btn3">停止循环定时</button>
 <button id="btn4">停止div运动</button>

<div id="box"></div>

</body>
</html>

一键复制编辑原始数据按行查看历史

yiskr 提交于 2019年03月01日 17:41 +08:00 . 11JS基础day02完成

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>

 <script>
 
 window.onload = function () {
 
 function func1() {
 // 定时器(轮播图),定时器时间到了就执行一次命令
 // setTimeout(执行的命令, 延迟时间) 执行一次
 // setInterval(执行的命令, 延迟时间) 循环执行,但是需要设置停止条件
 // clearInterval(定时器名) 来停止死循环
 var btn1 = document.getElementById("btn1")
 var btn2 = document.getElementById("btn2")
 var btn3 = document.getElementById("btn3")

 var oTimer = null;

 btn1.onclick = function () {
 setTimeout(() => {
 console.log("3s的时间到了.");
 }, 3000);
 }

 btn2.onclick = function () {
 oTimer = setInterval(() => {
 console.log("......");
 }, 1000);
 }

 btn3.onclick = function () {
 clearInterval(oTimer)
 oTimer = null;
 }

 }

 function func2() {
 var box = document.getElementById("box")
 var btn = document.getElementById("btn4")
 var num = 0;
 var speed = 5;
 var oTimer = setInterval(() => {
 // box.left += 10; 不能直接这样,修改css的left需要使用style
 num += speed;
 // 当num=800的时候,进行反向运动
 if (num >= 800) {
 speed = -5
 } 

 if (num <= 0) {
 speed = 5;
 }

 box.style.left = num + "px";
 }, 50);


 btn.onclick = function () {
 clearInterval(oTimer)
 oTimer = null
 }
 }

 function func3() {
 // 1- 轮播图的原理父类有一个div显示区域,里面有ul,ul里面的动态生成li,进行innerHTML的li标签拼接
 // 2- 不断的改变某个标签(控制所有的产品,选中父类的ul)的left取值,多次定时
 // 3- 当ul在父类div滚动的时候,超过位置就自动隐藏了
 // 4- 无缝拼接的话,原理是显示区域可以显示5个产品,复制一份的目的是,总共10个li标签,保证移动时候,显示区域是由替补的产品替换
 // 5- 一直左侧移动的话会漏孔,防止的话,当第十个li到达显示区域的最右边的话,那么直接left回到0,显示第一个li标签
 // 6- 判断的条件就是就是ul的left是否到达10个li的中间,也就是显示区域刚好开始显示第6个li, if num = 负的显示区域宽度
 // 7- 点击向右的箭头时,ul会向左移动,防止右侧镂空,则ul的left = 负的显示区域宽度时候,将left = 0
 // 点击向左的箭头时,ul会向右移动,防止左侧镂空,则ul的left = 0,将left = 负的显示区域宽度 
 }


 func2()

 }
 
 </script>

 <style>
 
 div{
 width: 200px;
 height: 200px;
 background: pink;

 /* <!-- 通过修改margin/position来使其移动, margin不合适 --> */
 position: fixed;
 left: 0;
 top: 50;
 }
 
 </style>

</head>
<body>

 <button id="btn1">单次定时</button>
 <button id="btn2">多次循环定时</button>
 <button id="btn3">停止循环定时</button>
 <button id="btn4">停止div运动</button>

 <!-- 通过修改margin/position来使其移动, margin不合适 -->
 <div id="box"></div>

</body>
</html>

误判申诉

此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。

如您确认内容无涉及不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。

取消

提交

简介

网上搜集的自学python语言的资料集合,包括整套代码和讲义集合,这是至今为止所开放网上能够查找到的最新视频教程,网上找不到其他最新的python整套视频了,. 具体的无加密的mp4视频教程和讲义集合可以在更新的Readme文件中找到,下载直接打开就能播放,项目从零基础的Python教程到深度学习,总共30章节,其中包含Python基础中的飞机大战项目,WSGI项目,Flask新经资讯项目, Django的电商项目(本应该的美多商城项目因为使用的是Vue技术,所以替换为Django天天生鲜项目)等等,希望能够帮助大家。资源搜集劳神费力,能帮到你的话是我的福分,望大家多多支持,喜欢本仓库的话,记得Star哦。

暂无标签

/ZMRSoft/Python24/blob/master/11JavaScript/day02/basic02.html

使用 MIT 开源许可协议

0 Stars

1 Watching

4 Forks

取消