原生js的简单倒计时

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>倒计时</title> <style> *{ margin: 0; padding:0; } body,html{ width: 100%; height: 100%; } header{ padding-top:20%; height:63%; background:-webkit-ra…

原生JS封装简单动画效果

原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(obj.timer) { //判断定时器是否存在,决定是否清空 clearInterval(obj.timer); } obj.timer = setInterval(function() { var leader = obj.offsetLeft; var step = num;//num为你移动一步…

原生js 当前时间倒计时代码

源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>原生js 当前时间倒计时代码</ti…

原生JS实现简单富文本编辑器2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

原生JS实现简单富文本编辑器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

原生JS实现简单留言板功能

原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS 实现留言板功能</title> <style> * { padding: 0; margin: 0; }…

原生js实现简单移动端轮播图

最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分分为四个文件: slideshow.html slideshow.css base.js slideshow.js 1.1.slideshow.html <!DOCTYPE html> <html lang="en"> <head> <meta chars…

原生js实现简单JSONP

JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接收到的跨域数据. 2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数. 3)在跨域服务器端接收GET请求,返回数据(返回之前定义函数的调用的字符串). 4)删除之前生成的script节点. 演示如下: 1)首先需要一个是同源服务器,一个跨域访问的服务器. 最简…

原生js实现简单的下拉刷新功能

前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一.创建简单的html页面: 假设代码里的float-box是一个主页面. 二.封装下拉刷新的功能模块: (1)首先创建一个Slide构造函数,用来初始化属性与函数. function Slide(dom){ this.start_y=null;//手指滑动屏幕的初始位置 this.end_y=null…

原生js实现简单的放大镜效果

前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. html: <div id="box"> <div id="small"></div> </div> <div id="big"> <img src="12.png"…

JS实现简单倒计时

/*倒计时*/ lcf.downTime = function (endTime,obj,callback){ /*基本判断*/ if(!endTime || typeof endTime !== "string") return false; /*基本判断*/ if(!obj || typeof obj !== "object") return false; /*获取日期的毫秒*/ var endTime = Date.parse(endTime); /*定时器*…

vuejs2.0运用原生js实现简单的拖拽元素功能

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title>&…

仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟

先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默认你已经做好了6个立方体,直接上JS代码: 页面进来的时候,先给6个立方体赋值上现在的时间,由于立方体比较小,左右2个面看不清且影响效果,这里左右2个面就不赋time了: //获取元素 var oul = document.querySelectorAll("ul"); var back…

原生js实现简单的随机点名系统

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib…

原生js实现简单轮播的淡入淡出效果

实现这种淡入淡出的轮播关键在于css的一种设置首先它不能像传统的轮播显示隐藏或者左右浮动他应该让其固定定位使其重叠在一起达到这种效果然后设置c3动画属性 transition:1s; 具体代码如下请君欣赏 * { ; ; list-style: none; } body { width: 100%; height: 100%; background-color: #666; } .container { width: 650px; height: 236px; margin:…

原生js写简单轮播图方式１－从左向右滑动

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片.点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#i…

原生js实现简单的焦点图效果

用到一些封装好的运动函数,主要是定时器效果为图片和图片的描述定时自动更换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } img…

使用原生JS实现简单的ajax

Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术.它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互,所以可以实现局部内容的刷新. ajax的实现,主要是靠javascript中的内置对象XMLHttpRequest.它可以向服务器发送请求并接收服务器的响应. 下面给给出两个简单的例子: Get方式发送请求: //浏览器端 var xhr = new XMLHttpRequest; xhr.open('get', './bb.php?id=4'); xhr…