最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。 万丈高楼平地起，基础打扎实了学什么都快，而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。 先上一张自拍镇楼，哈哈哈 首先先说一下思路吧，首先任意张图片以ul的形式保存显示，上代码吧 <div id="wrap"><u...
本文实例为大家分享了JS实现前端本地文件上传的具体代码，供大家参考，具体内容如下 通过input type = file来选择本地文件 <div><form><input type="file" id="file-input" name="fileContent"></form> </div> var fileInput = document.querySelector(#file-input); fileInput.onchange = function(){console.log(文件名:,this.value)var formData = new FormData(this.form);console.log(formData) } //打印出的结果是文件名: C:...
原生js的页面加载完毕的使用方法为 window.onload=function(){//somecode }在jquery的影响下的错误写法为： window.onload(function(){//somecode }) 以上这篇原生js检测页面加载完毕的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
用原生JS我们经常使用window.onload事件来加载页面。但是window.onload是在页面元素都加载完毕后才执行，如果页面内有大的图片的话，会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替window.onload。但又不愿意仅为了这一个需求而引入整个JQuery库，于是就把jQuery的方法提取出来，单独使用了。 如果只需要对DOM进行操作，那么这时就没必要等到页面全部加载...
本文实例讲述了原生JS实现获取及修改CSS样式的方法。分享给大家供大家参考，具体如下： 大家都知道在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事，这里像大家介绍下获取css样式的方法，希望可以帮助一些需要的人，如果有幸被大牛看到，有更好的办法，欢迎提出！！！ 一、行内元素样式获取： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>js获取外部样式</title> </head> <b...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法。分享给大家供大家参考，具体如下： 有的时候需要动态加载一个javascript文件，并且在加载成功后执行回调函数（例如文件中保存了json数据之类的）。要实现这样的功能，可以使用<script> 元素的load 事件（IE9+、chrome、FireFox等）和onreadystatechange 事件（IE8以下），直接上代码： function loadScript(src, callback) {var script = document.creat...
本文实例讲述了原生JS实现的简单小钟表功能。分享给大家供大家参考，具体如下： 先来看看运行效果：完整代码： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>www.gxlcms.com 钟表</title><style type="text/css">body {background-color:#00A2D4;}.clock {width: 200px;height: 200px;background: -webkit-radial-gradient(#3b3b3b, #000);background: radial-gradient(#2E3F50, #0E1B29);box-shadow: inset 0px 0px...
本文实例讲述了原生JS实现简单的倒计时功能。分享给大家供大家参考，具体如下： 1、第一种 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>www.gxlcms.com JS倒计时</title> </head> <body> <div id="div"></div> <script type="text/javascript"> window.onload=clock; function clock(){ var today=new Date(),//当前时间h=today.getHours(),m=today.getMinutes(),s=today.getSeconds();var stopTime=new Date("Feb...
本文实例讲述了原生JS实现的简单轮播图功能。分享给大家供大家参考，具体如下： 经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，但我想先从简入手，所以自己查阅资料，修改bug，终于完成。话不多说，上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
一.前言 众所周知：没有对象怎么办？那就new一个！ 那么在JS中，当我们new一个对象的时候，这个new关键字内部都干了什么呢？ 现在我们就来剖析一下原生JS中new关键字内部的工作原理。 二.原始的new 首先，我们先new一个对象看看：//创建Person构造函数，参数为name,agefunction Person(name,age){this.name = name;this.age = age;}//实例化对象小明xm = new Person(xiaoming,18);//打印实例化出来的对象小明console.log(xm);打印结...
由于遇到相关序列化的问题，但是vue项目中由于减少队jquery引用的限制，导致不能用$.param来序列化参数，所以写了如下方法用来解决相关问题，但由于考虑不全，可能存在判断不全或者代码冗余等情况，希望多提意见，多多改善 var personObj = {name:cheny0815,age:24,c:[{id:1,name:2},{id:2,name:3}],other:{a:1,b:{c:2,d:{a:1,b:{e:1,f:2}}}}, } var nextStr = ; function changeDataType(obj){let str = if(typeof obj == object)...
本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考，具体如下： 一、效果预览：由于只能上传2M以下的图片，这里只截取了自动切换的效果： 二、编写语言 HTML、CSS、原生JS 三、编写思路 （一）HTML部分 1、.slide意为滑槽，里面存放所有图片； 2、.prev存放向左的箭头，.next存放向右的箭头； 3、pointer意为指示器，存放下方的五个切换按钮，每个切换按钮用span来表示； 4、.m-view，意为视窗，即每次看到图片的窗口，...
本文实例讲述了原生js封装的ajax方法。分享给大家供大家参考，具体如下： 众所周知，框架之间会有冲突，这是源生js就起到作用了，下面介绍一种源生js封装的ajax请求。 function ajax(options) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);//创建xhr对象 - 非IE6if (window.XMLHttpRequest) {var xhr ...
当我们有form表单而且里面的表单元素较多时，咱们总不能一个个去获取表单元素内的值来进行拼接吧！这样会很让人蛋疼！为了方便与后台交互并且提高自己的开发效率，并且不让你蛋疼；我们一起用原生来写一个表单序列化方法： 先介绍一下jquery中有相应的表单序列化的方法： 1.serialize()方法 格式：var data = $("form").serialize(); 功能：将表单内容序列化成一个字符串。 这样在ajax提交表单数据时，就不用一一列举出每一个参数。...
本文实例讲述了原生JS实现列表子元素顺序反转的方法。分享给大家供大家参考，具体如下： 编写一个函数将一个列表里面的所有子元素顺序反转，问题不难但是解决的方法却有多种，而且性能大不一样，下面就介绍几种常用的方法： 1. 采用直接的DOM操作： var ul = document.getElementById(target); var list = ul.getElementByTagName(li); var length = list.length; while(length--){ul.appendchild(ul.childNodes[length]); }这种方...