前端
Crazy ProMonkey
这个作者很懒,什么都没留下…
展开
-
JS基础——定时器的应用2
补充:继上一篇定时器的功能之后,本篇将对上篇应用的功能加以扩充。具体增加的功能有:新增一个向左移动的按钮,点击该按钮后,物体会向左移动因向左和向右移动二者的功能大同小异,所以设计一个公共的移动函数方法move(),使其轻松实现向左和向右移动的功能因向左和向右的方向取决于输入的speed的速度值的正负,正值向左,负值向右。但该方法不是很好,需要额外输入速度的正负号,因此需要设计一个方法,可以实现speed的输入值一直为正,但仍可以实现向左和向右移动代码演示:<!DOCTYPE原创 2021-11-06 17:40:04 · 1823 阅读 · 1 评论 -
JS基础——定时器的应用
要求:点击按钮,让物体开始移动,利用定时器的方法让物体移动至终点时停止移动思路:首先,需要知道物体实时的位移量,这里需要定义一个getStyle函数来获取物体当前的样式其次,开启一个定时器setInterval(),让物体开始移动最后,需要设置关闭定时器clearInterval()的条件代码演示:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title原创 2021-11-06 16:44:22 · 1787 阅读 · 0 评论 -
JS基础——键盘移动练习
要求:物体根据不同的方向键按下,会向不同的方向移动,当用户同时又按下ctrl键时,物体移动速度发生变化思路:创建一个div,并给它绑定一个键盘事件,事件中又给方向键绑定物体移动事件代码演示:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1原创 2021-11-06 10:21:14 · 1429 阅读 · 0 评论 -
JS必做——全选练习
练习要求:制作一个选择页面,选项包括全选、全不选、单向勾选、多项勾选、反选、提交等多个按键功能,包含了JS的DOM操作事件中的大部分知识点以及强烈的逻辑思维能力的锻炼,,非常适合所有学习JS中DOM操作知识点的伙伴们去练习,可以这样说,把这个练习完成后,JS的DOM操作就掌握的差不多了!!!项目功能:1.#checkedAllBtn 全选按钮 - 点击按钮以后,四个多选框全都被选中2.#checkedNoBtn 全不选按钮 - 点击按钮以后,四个多选框全都不被选中3.#check...原创 2021-09-27 22:00:45 · 1622 阅读 · 0 评论 -
JS基础——图片切换练习
要求:制作一个使用JS来操作的简单的页面中图片切换的练习,并显示所展示图片的相关信息。实现思路:大致了解练习后,可以知道整个练习是在一个大div块中进行图片和文字信息显示的。显然,图片显示需要用到<img>标签,文字信息展示可以使用<p>标签,图片之间的切换可以使用<button>按钮来实现相关操作。最终,在前面的基础上加上相关JS代码,就可以使所有的图片之间可以随意进行相应切换,并显示切换后的图片文字信息。代码演示:<!DOCTYPE htm原创 2021-09-27 17:05:31 · 1442 阅读 · 0 评论 -
Python实现简单的web服务器
我们都知道,我们可以通过Pyhton的网络编程实现C/S(Server-Client)端双向通信,不仅如此,我们还可以使用Python编程将数据信息发送至浏览器web页面进行数据信息展示,具体操作如下:1)使用socket套接字开启服务器;2)设置同时访问人数权限;3)构造发送信息函数方法;4)开启线程,可在服务器控制台显示客户端详情。代码演示:import socketimport threadingimport timeserver = socket.socket()原创 2021-09-11 14:51:15 · 2504 阅读 · 0 评论 -
JS实现简单的登录注册页签
项目要求:利用前端知识编写一个简单的网站登录和注册页签。登录和注册功能均在同一页面,点击登录按键就进入登录操作,点击注册按键则进入用户的注册操作。其中,登录和注册的内容和大部分网站的登录注册内容一直相同即可。项目编写:因为我们要实现一个页签,那就必须要先编写一个前端展示界面。那就将HTML和CSS结合运用起来即可,具体如下图:<div class="container"> <div class="form"> <ul>原创 2021-09-04 21:13:50 · 5246 阅读 · 1 评论 -
JS点击计数存储案例
项目功能要求:点击页面红色块默认不计数;点击开始按钮后再点击红色块则开始计数;点击结束按钮后再点击红色块则不计数;关闭页面并再次打开页面,界面会显示上次关闭页面时的计数值。代码设计:本项目结合了前端页面的设计和JS的使用。具体代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击计数</title> <sty原创 2021-09-02 22:17:19 · 1944 阅读 · 0 评论 -
HTML+CSS实现前端网页界面案例
众所周知,HTML、CSS、JS是前端的三大件。那么,就仅仅HTML和CSS两件就可以完成大部分简单的页面的制作。就此,向大家分享一个普通的百度新闻网页,并完成设计。在这里,可以点击鼠标右键---->检查,或者快捷键同时按下Fn键+F12键,就可以直接弹出以下显示。那么,就可以参照以上网页代码格式,对该网页进行重新设计。首先,我们需要安装HBuilder X这个软件(可以直接去官网下载,不需要安装和配置运行环境,软件安装好后就可以直接使用,惭怍简单,便于使用)。进入页面-->新.原创 2021-08-31 15:10:34 · 7223 阅读 · 0 评论