这是昨天用原生的js写的打字动画游戏，主要用的间歇定时器，对象，还有Math方法，感觉还行，主要看消除字母的时间快慢，但是也有bug，就是字母都是一次性生成的，所以一开始，看起来感觉会有种爆炸的感觉，如果能够一次性生成一批，然后分批往下掉就好了，求大神帮忙改改，大家也可以参考参考。<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><style>body,button{margin: 0;padding: 0;}body {background: #3...
效果如下所示：代码如下：<style type="text/css">* {margin: 0;padding: 0;}ul, li {list-style: none;}#week {width: 350px;height: 350px;border: 1px solid #ccc;}#week h6 {font-size: 20px;overflow: hidden;height: 40px;line-height: 40px;}#week h6 div {float: left;width: 250px;text-align: center;}#week .prev {float: left;font-size: 12px;width: 50px;cursor: pointer;}#week .next {float: right;font-size: 12p...
用原生js在父页面获取iframe子页面的元素，以及在子页面获取父页面元素，这是平时经常会用到的方法，这里写一个例子来总结下：1、父页面（demo.html），在父页面修改子页面div的背景色为灰色，原来为红色：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" conte...
本文实例讲述了原生js模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下：通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：相应的代码：shoppingCart.html<!DOCTYPE html> <html> <head><meta charset = "UTF-8"><title>JavaScript实现购物车项目实战</title><link rel="stylesheet" type="text/css" href="./css/shoppingCart.css...
知识要点实现原理：1.点击楼层跳相应楼层，用的是锚点定位电梯：<a href="#item2">2F 个护家清</a></li>列表title：<div class="floor-title" id="item2"></div>这个没什么好说的2.当点击楼层跳到相应楼层时，该楼层高亮显示我们的脚本主要就是实现这个功能。原理获取浏览器导航条下拉的距离与各个楼层相对于文档顶部下拉的距离进行校验。这里需要用到的方法事件：window.onscroll=function(){ } //浏览器滚动监听事件执行函数 .sc...
原生JS和jQuery操作DOM的一些对比总结，文中总结了很多的对比，相信对大家的学习或者工作能带来一定的帮助，需要的朋友可以参考借鉴，下面来一起看看吧。一、创建元素节点1.1 原生JS创建元素节点document.createElement("p");1.2 jQuery创建元素节点$(<p></p>);`二、创建并添加文本节点2.1 原生JS创建文本节点document.createTextNode("Text Content");通常创建文本节点和创建元素节点配合使用，比如：var textEl = document.creat...
本文实例为大家分享了js查询天气应用，供大家参考，具体内容如下实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页面上。由于ajax不支持跨域，所以采用了jsonp的方式来调用数据。实现的原理比较简单，HTML和css比较长，我就只将js代码贴出来，想看完整代码的//调用jsonp函数请求当前所在城市 jsonp(ht...
使用方式：new downUpData({url:"http://192.168.1.103:8080/test/ data.json",distance:20,callback:function(resp,config){var oUl = document.getElementById(ul);for(var i=0;i<resp.data.length;i+=1){oUl.innerHTML+= <li>+ resp.data[i].title +</li>;} }}).isBottom(); 默认滚动到底部会去请求ajax参数说明：url:请求的数据地址，不支持跨域（必须）distance:距离底部多远加载（可选参数）callback:当滚动到指定距离后请...
公司实习生问我table的增删操作，用jQuery很简单的实现了。又问我不使用jQuery，只使用js如何实现。面对这种情况，我的一贯做法是‘不理解，但是支持。jQuery用的多了，人也懒了，但还是用js实现了这一操作，觉得难点在于IE兼容。。。只是想找代码看看的可以跳过分析过程，文章底部附有完整代码。以下是coding过程：HTML结构代码一个基本的table结构，增加了一些简单的样式，三个按钮分别对应创建、清空，和一个预留。<!DOCTYPE HT...
本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码，供大家参考，具体内容如下文字表达有限，直接上代码了<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个基于面向对象的分页组件</title> <style> html,body{padding:0;margin:0;} p{padding:0;margin:0;} a{text-decoration: none} .Paging{overflow: hidden;} .Paging-item{float: left;padding: 10px 15px;background: #4caf50;color: #fff;m...
通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所以有些东西写的比较死，就像animate函数一样，可选的参数不多有时候可能并不能实现我们想要的效果。 注释的部分是用来测试用的，写代码的过程并不是十分顺利，因为用js平时用的不是很细，都是大体知道方法，也用过，但等到真正要实现动...
在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。构建框架，基本没难度。<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>透明度函数的封装</title><style type="text/css">#box{width: 200px;height: 200px;background: red;margin: 50px auto;opacity: .3;filter: al...
今天我给大家分享一下自己用js写的一个图片放大器效果，我做了两种效果的放大，其实它们的原理都差不多，都是采用了两张图片给两张图片设定相应的尺寸，最后显示在不同位置，最终实现放大效果。第一种是我仿照淘宝购物页面的一个放大镜效果，当鼠标移动到商品图片上时，图片上会出现一个矩形区域，而这个区域就是你要放大的区域，然后商品图片的右侧会出现一个放大后的商品图片。这种放大方式只需要你计算好放大的比例，然后通过修...
在jQuery 3.0的版本前, ready经典用法是用一个匿名函数，像这样：$(document).ready(function() {// Handler for .ready() called. }); jQuery 3.0 ready() 变化在jQuery 3.0发布之前，有以下几种方法称之为ready方法： 在document元素上操作： $(document).ready(handler); 在空元素上操作: $().ready(handler); 或者直接（即不在一个具体的元素上）操作: $(handler);上述所有命名的变种在功能上是等价的。无论是哪个元...
js获取日期函数 //获取当前时间日期 function CurentTime() {var now = new Date();var year = now.getFullYear(); //年var month = now.getMonth() + 1; //月var day = now.getDate(); //日var hh = now.getHours(); //时var mm = now.getMinutes(); //分var clock = year + "-";if(month < 10)clock += "0";clock += month + "-";if(day < 10)clock += "0";clock += day + " ";if(hh < 10)clock += "0";cl...