原生js实现一个简单的倒计时功能

大家好,我是云中君!欢迎大家来观看我的博客之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功能! 下面是布局代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/…

JS事件编程练习-自制计算器使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

编程练习使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById("id").value = 1: 取值:var = document.getElementById("id").value: 任务第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getEl…

原生 JS实现一个简单分页插件

最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所以就涉及到了前端分页功能,到网上看了一圈,发现那些开源的相关插件要么有各种依赖,要么太复杂用不上,要么上手有点困难,所以就想着应该也不太难,自己写个得了. 关于这种分页功能,平时很常见,不过需要自己动手做的需求却很少,所以一直停留在知道应该就是那么回事,但实际上自己从来没怎么探究过的层面上,知道应该…

原生js实现一个简单的轮播图

想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了首先是构造html: <div id="container"> <div id="list" style="left:-600px"> <img src="img/4.jpg" alt="4"> <img src=&q…

如何用原生JS实现一个简单的promise

我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧先简单来说一下啥是promise吧它是什么?Promise是一个方案,用来解决多层回调嵌套的解决方案.它现在是ES6的原生对象. 干嘛用的?可以把一个多层嵌套的同步.异步都有回调的方法,给拉直为一串.then()组成的调用链. 解决啥问题?多层嵌套的回调方法中,如果同时存在同步.异步的方法,那么实际执行顺序会混乱.不好调试不好维护现在我们再来说一说自己写…

原生JS实现一个简单的前端路由（原理）

说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示. 直接看代码或许更直观. function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.route…

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步: 通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt…

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------…

用原生js写一个"多动症"的简历

用原生js写一个"多动症"的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现思路这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果.又好像一个早已经录制好影片,而我们只是坐在放映机前观看. 原理分两个部分页面能看见的不断跳动着的增加的文字,由innerHTML控制页面的布局效果由藏在"背后的"style标签完成想象一下你要往一张网页每间隔0…

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------…

利用原生JS实现类似浏览器查找高亮功能(转载）

利用原生JS实现类似浏览器查找高亮功能在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求在.content中有许多.box,需要在.box中找出搜索的字符串,再将无搜索结果的.box隐藏掉,此外还要将字符串高亮.这个页面用vue.js实现了数据交互,不想用jquery来实现得查找高亮功能,得用原生js来实现该功能. 原理将各个.box的文本内容提取,利用正则判断是否匹配字符串,若无搜索字符串,则隐藏该.box:否则继续找到具体的与该字符串匹…

js实现一个简单钟表动画(javascript+html5 canvas)

第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的方法,难免有不足之处,仅是练习所用. 实现思路:画表盘,画刻度,画表针就是这么个思路. 主要就涉及到以下几个方法 arc 创建弧/曲线(用于创建圆形或部分圆) rotate 旋转 lineTo画线 <!DOCTYPE html PUBLIC &qu…

原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;widt…

原生js实现一个DIV的碰撞反弹运动

原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back…

php+js实现一个简单的用户管理系统

php + js 实现一个简单的用户管理系统说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 assets (页面静态文件夹) css (下面这些就不用解释了把) js imgs php controller (控制类,包含大部分的逻辑部分代码) LogOff.php (超级用户注销) sudoLoginVer.php (超级用户登录验证) userModification.php (用户信息…

鸿蒙系统应用开发之JS实现一个简单的List

在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用,利用JS UI实现了一个最简单的HelloWorld. 今天我打算在智慧屏设备上利用豆瓣音乐的接口数据实现一个简单的List界面. 说起来这是一个很简单的功能实现,不过其中也有不少的坑. 首先要说明的是,鸿蒙应用开发里有Java UI框架和JS UI框架,如果要谈界面实现的简单方便,当然是选用JS UI框架了. 大概的浏览了一下JS API的文档, https://developer.harmonyos.c…

使用原生JS实现一个风箱式的demo，并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at…

PHP实现一个简单url路由功能

如果一个页面的内容呈现,需要根据url上传递的参数来进行渲染.很多时候可能是这样子写:xxx.com/xx?c=x&m=x& t=..,而我们看到的url往往是这样子的(以新浪微游戏的咖啡恋人为例) game.weibo.com/ilovecoffee….这种URL设计看上去比前一种更好一点:) 如果我们访问一下不存在的游戏应用,例如game.weibo.com/ilovecoffee222,则会输出如下的错误提示: game.weibo.com后面匹配到的项,指向了某个php页面,然后根…

如何用原生js开发一个Chrome扩展程序

原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成,在本文中,我将在几分钟内引导你完成一个简单的扩展程序关于Chrome扩展程序 Chrome 扩展程序本质上只是一组可以自定义 Google Chrome 浏览器体验的文件.Chrome 扩展程序有几种不同的类型:有些在满足某个特定条件时激活,例如当你来到商店的结账页面时:有些只在你点击图标时弹出…

用node.js写一个简单爬虫，并将数据导出为 excel 文件

引子最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍cnode.js社区管理员写的包教不包会node课程,内容量相对于 NODE入门多了很多,特别是这个可能更注重实际项目的构建方式. 3 通读一遍朴灵的<node.js深入浅出>,配合着api一起看(还在继续..药不能停). 尽看书总是有一种茫然不知所措的感觉,就像手中有一把锋利的钢刀,却不知该如何…

用原生JS实现一个轮播（包含全部代码和详细思路）

在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+css) 包含的知识有:positon定位, 最外层是一个div,它包含了所有的元素.这个轮播一共有三张图片,这三张图片包含在一个无序列表中.最外层的div还有两个用来切换上一张图片和下一张图片的子元素.这两个子元素也是div,切换上一张图片的div的id属性为pre,切换下一张图片的div的id属…

用原生JS写一个网页版的2048小游戏（兼容移动端）

这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online-game/ github地址:https://github.com/Yuan-Yiming/2048-online-game ==================================================================== 下面简单分析一下JS代码: 1.游…