微信内置浏览器（WebView）中特有的javascript API（javascript Interface），随着微信官方的调整，部分API已经不能直接使用，比如类似直接分享到朋友圈WeixinJSBridge.invoke(shareTimeline,data,callback) 这样的功能，直接调用，会得到一个访问拒绝的response
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function WeiXinShareBtn() { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } alert("请先通过微信搜索 wow36kr 添加36氪为好友，通过微信分享文章 "); } else { WeixinJSBridge.invoke('shareTimeline', { "title": "36氪", "link": "http://www.36kr.com", "desc": "关注互联网创业", "img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png" }); } } |
此方法已过时，被微信禁用了。只能用微信官方的接口 1、前台脚本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script src="../Scripts/jquery-1.10.2.js"></script> <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script> <script> wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '<%=appid%>', // 必填，公众号的唯一标识 timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳 nonceStr: '<%=nonce%>', // 必填，生成签名的随机串 signature: '<%=signature%>',// 必填，签名，见附录1 jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 //当前客户端版本是否支持指定JS接口,分享到朋友圈,分享给朋友 }); wx.ready(function () { wx.checkJsApi({ jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function (res) { alert(JSON.stringify(res)); // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); //朋友圈 wx.onMenuShareTimeline({ title: '春天里的健康', // 分享标题 desc: '春天里的健康春天里的健康春天里的健康', // 分享描述 link: '<%=thisUrl%>', // 分享链接 imgUrl: 'https://imgsa.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=c31e0863bf315c60579863bdecd8a076/4034970a304e251fb62a408ea486c9177e3e53e2.jpg', success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); //朋友 wx.onMenuShareAppMessage({ title: '春天里的健康', // 分享标题 desc: '春天里的健康春天里的健康春天里的健康', // 分享描述 link: '<%=thisUrl%>', // 分享链接 imgUrl: 'https://imgsa.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=c31e0863bf315c60579863bdecd8a076/4034970a304e251fb62a408ea486c9177e3e53e2.jpg', // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 alert("分享成功"); }, cancel: function () { // 用户取消分享后执行的回调函数 alert("取消分享"); } }); }); </script> |
2、后台代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
using Senparc.Weixin.MP.Containers; using Senparc.Weixin.MP.Helpers; using System; using System.Collections.Generic; using System.Configuration; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace jkmobile.share { public partial class ReportShare : System.Web.UI.Page { public string appid = "", timestamp="", nonce="",thisUrl="", signature=""; protected void Page_Load(object sender, EventArgs e) { WXShareModel wxmodel = new WXShareModel(); wxmodel = Ge_WXShareModel(); appid = wxmodel.appid; timestamp = wxmodel.timestamp; nonce = wxmodel.nonce; thisUrl = wxmodel.thisUrl; signature = wxmodel.signature; } #region 微信分享 public WXShareModel Ge_WXShareModel() { string APPID = ConfigurationManager.AppSettings["appid"]; string secret = ConfigurationManager.AppSettings["secret"]; WXShareModel fxModel = new WXShareModel(); fxModel.appid = APPID; fxModel.timestamp = JSSDKHelper.GetTimestamp(); fxModel.nonce = JSSDKHelper.GetNoncestr(); fxModel.thisUrl = Request.Url.ToString().Split('#')[0]; fxModel.ticket = JsApiTicketContainer.TryGetJsApiTicket(APPID, secret); //最后一个参数url，必须为当前的网址 var signature = JSSDKHelper.GetSignature(fxModel.ticket, fxModel.nonce, fxModel.timestamp, fxModel.thisUrl); fxModel.signature = signature; return fxModel; } #endregion } public class WXShareModel { /// <summary> /// 公众号的唯一标识 /// </summary> public string appid { get; set; } /// <summary> /// 生成签名的随机串 /// </summary> public string nonce { get; set; } /// <summary> /// 生成签名的时间戳 /// </summary> public string timestamp { get; set; } /// <summary> /// 签名 /// </summary> public string signature { get; set; } public string ticket { get; set; } /// <summary> /// 分享的地址 /// </summary> public string thisUrl { get; set; } } } |
请引用微信官方封装好的dll Senparc.Weixin.dll Senparc.Weixin.MP.dll from:https://blog.csdn.net/lybwwp/article/details/70172232
View Details也谈基于 Node.js 的全栈式开发（基于 Node.js 的前后端分离） 前言 为了解决传统 Web 开发模式带来的各种问题，我们进行了许多尝试，但由于前/后端的物理鸿沟，尝试的方案都大同小异。痛定思痛，今天我们重新思考了“前后端”的定义，引入前端同学都熟悉的 Node.js，试图探索一条全新的前后端分离模式。 随着不同终端（Pad/Mobile/PC）的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开发效率，前后端分离的需求越来越被重视，后端负责业务/数据接口，前端负责展现/交互逻辑，同一份数据接口，我们可以定制开发多个版本。 这个话题最近被讨论得比较多，阿里有些 BU 也在进行一些尝试。讨论了很久之后，我们团队决定探索一套基于 Node.js 的前后端分离方案，过程中有一些不断变化的认识以及思考，记录在这里，也希望看到的同学参与讨论，帮我们完善。 一、什么是前后端分离？ 最开始组内讨论的过程中我发现，每个人对前后端分离的理解不一样，为了保证能在同一个频道讨论，先就什么是”前后端分离”达成一致。 大家一致认同的前后端分离的例子就是 SPA(Single Page Application)，所有用到的展现数据都是后端通过异步接口（AJAX/JSONP）的方式提供的，前端只管展现。 从某种意义上来说，SPA 确实做到了前后端分离，但这种方式存在两个问题： WEB 服务中，SPA 类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA 不能作为一种通用的解决方案。 现阶段的 SPA 开发模式，接口通常是按照展现逻辑来提供的，有时候为了提高效率，后端会帮我们处理一些展现逻辑，这就意味着后端还是涉足了 View 层的工作，不是真正的前后端分离。 SPA 式的前后端分离，是从物理层做区分（认为只要是客户端的就是前端，服务器端的就是后端），这种分法已经无法满足我们前后端分离的需求，我们认为从职责上划分才能满足目前我们的使用场景： 前端：负责 View 和 Controller 层。 后端：只负责 Model 层，业务处理/数据等。 为什么去做这种职责的划分，后面会继续探讨。 二、为什么要前后端分离？ 关于这个问题，玉伯的文章《Web 研发模式演变》中解释得非常全面，我们再大概理一下： 2.1 现有开发模式的适用场景 玉伯提到的几种开发模式，各有各的适用场景，没有哪一种完全取代另外一种。 比如后端为主的 MVC，做一些同步展现的业务效率很高，但是遇到同步异步结合的页面，与后端开发沟通起来就会比较麻烦。 AJAX 为主 SPA 型开发模式，比较适合开发 APP 类型的场景，但是只适合做 APP，因为 SEO 等问题不好解决，对于很多类型的系统，这种开发方式也过重。 2.2 前后端职责不清 在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码，因为没有约束，M-V-C每一层都可能出现别的层的代码，日积月累，完全没有维护性可言。 虽然前后端分离没办法完全解决这种问题，但是可以大大缓解。因为从物理层次上保证了你不可能这么做。 2.3 开发效率问题 淘宝的 Web 基本上都是基于 MVC 框架 webx，架构决定了前端只能依赖后端。 所以我们的开发模式依然是，前端写好静态 demo，后端翻译成 VM 模版，这种模式的问题就不说了，被吐槽了很久。 直接基于后端环境开发也很痛苦，配置安装使用都很麻烦。 为了解决这个问题，我们发明了各种工具，比如 VMarket，但是前端还是要写 VM，而且依赖后端数据，效率依然不高。 另外，后端也没法摆脱对展现的强关注，从而专心于业务逻辑层的开发。 2.4 对前端发挥的局限 性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作才能碰撞出火花，但由于后端框架限制，我们很难使用 Comet、Bigpipe 等技术方案来优化性能。 为了解决以上提到的一些问题，我们进行了很多尝试，开发了各种工具，但始终没有太多起色，主要是因为我们只能在后端给我们划分的那一小块空间去发挥。只有真正做到前后端分离，我们才能彻底解决以上问题。 三、怎么做前后端分离？ 怎么做前后端分离，其实第一节中已经有了答案： 前端：负责 […]
View Details1.页面中添加modal <!-- 模态框（Modal） --> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="width:900px;"> <div class="modal-content"> //内容动态填充 </div><!-- /.modal-content --> </div><!-- /.modal --> </div> 2.数据格式。页面动态生成a 标签 <a data-toggle=’modal' data-target=’#showModal' onclick=targetto('" + row.id + "')>"+ row.title+"</a>"; 3.单击事件 function targetto(id){ $("#showModal").modal({ remote: "showAction.action?id="+id }); } 4.每次隐藏时，清除数据。确保点击时，重新加载 $("#showModal").on("hidden.bs.modal", function() { $(this).removeData("bs.modal"); }); 5.基于bootstrap3.其他版本，请自己Google，如有雷同,纯属巧合，如有需要，欢迎分享。 from:https://www.cnblogs.com/youmingkuang/p/6214610.html
View Details一、我们讲什么？ 我们讲两个东西： 1、WebGL背后的工作原理是什么？ 2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？ 我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题： 1、很多东西还是做不出来，甚至没有任何思路； 2、碰到bug无法解决，甚至没有方向； 3、性能出现问题，完全不知道如何去优化。 这个时候，我们需要了解更多。 三、先了解一个基础概念 1、什么是矩阵？ 简单说来，矩阵用于坐标变换，如下图： 2、那它具体是怎么变换的呢，如下图： 3、举个实例，将坐标平移2，如下图： 如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。 四、WebGL的工作原理 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现： 它只能会点、线、三角形？一定是我看错了。 没有，你没看错。 就算是这样一个复杂的模型，也是一个个三角形画出来的。 4.2、WebGL绘制流程 简单说来，WebGL绘制过程包括以下三步： 1、获取顶点坐标 2、图元装配（即画出一个个三角形） 3、光栅化（生成片元，即一个个像素点） 接下来，我们分步讲解每个步骤。 4.2.1、获取顶点坐标 顶点坐标从何而来呢？一个立方体还好说，如果是一个机器人呢？ 没错，我们不会一个一个写这些坐标。 往往它来自三维软件导出，或者是框架生成，如下图： 写入缓存区是啥？ 没错，为了简化流程，之前我没有介绍。 由于顶点数据往往成千上万，在获取到顶点坐标后，我们通常会将它存储在显存，即缓存区内，方便GPU更快读取。 4.2.2、图元装配 我们已经知道，图元装配就是由顶点生成一个个图元（即三角形）。那这个过程是自动完成的吗？答案是并非完全如此。 为了使我们有更高的可控性，即自由控制顶点位置，WebGL把这个权力交给了我们，这就是可编程渲染管线（不用理解）。 WebGL需要我们先处理顶点，那怎么处理呢？我们先看下图： 我们引入了一个新的名词，叫“顶点着色器”，它由opengl es编写，由javascript以字符串的形式定义并传递给GPU生成。 比如如下就是一段顶点着色器代码： 1 2 3 4 attribute vec4 position; void main() { gl_Position = position; } attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值； position即我们定义的顶点坐标； gl_Position是一个内建的传出变量。 这段代码什么也没做，如果是绘制2d图形，没问题，但如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，我们则需要转换成屏幕坐标。 比如：v(-0.5, 0.0, 1.0)转换为p(0.2, -0.4)，这个过程类似我们用相机拍照。 4.2.2.1、顶点着色器处理流程 回到刚才的话题，顶点着色器是如何处理顶点坐标的呢？ 如上图，顶点着色器会先将坐标转换完毕，然后由GPU进行图元装配，有多少顶点，这段顶点着色器程序就运行了多少次。 你可能留意到，这时候顶点着色器变为： 1 2 3 4 5 attribute vec4 position; uniform mat4 […]
View Details2012年12月12日，【《Web 前端开发人员和设计师必读文章》系列十二】和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心推荐的文章能够帮助到您。 jQuery 插件和教程 精心挑选：精美的 jQuery 加载动画和进度条插件 精心挑选：10款基于 jQuery 的图片360度旋转插件 精心挑选：几款实用的 jQuery 全景图片展示插件 精心挑选：推荐6套精美的免费 jQuery UI 主题 精心挑选：12款 JavaScript 日历和时间选择插件 精心挑选：12款优秀 jQuery Ajax 分页插件和教程 精心挑选：23款美轮美奂的 jQuery 图片特效插件 精心挑选：10款实用的 jQuery Tab 切换插件和教程 精心挑选：15款优秀 jQuery 文本特效插件和教程 精心挑选：33个优秀的 jQuery 图片展示插件分享 HTML5 & CSS3 应用 Web 前沿：展示一组极其绚丽的 CSS3 效果 未来的Web：让你惊叹的 Chrome 实验项目 推荐十款非常优秀的 HTML5 在线设计工具 35款优秀的基于 HTML5 开发的网页游戏 你可能不知道的5个功能强大的 HTML5 API Web前沿：CSS3 在网页设计中的20佳惊艳应用 Web技术前沿：那些让人惊叹的 CSS3 应用演示 推荐35款非常精致的 CSS3 和 HTML5 网页模板 推荐十款精心挑选的在线 CSS3 代码生成工具 推荐几份能够帮助你学习 CSS3 的实用帮助手册 精美网站模板 推荐10套精美的免费网站后台管理系统模板 12款高质量的免费 HTML 网页模板下载 12款非常漂亮的免费 CSS 网页模板下载 30款精美的国外企业网站模板 PSD 免费下载 分享20款精美的免费 Flash […]
View Details在工作中，我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多，但是一时半会又想不起来在哪，所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在 Web 开发中很有用的效果，记得收藏！ 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。 源码下载 在线演示 美！视差滚动在图片滑块中的应用 视差滚动（Parallax Scrolling）已经被广泛应用于网页设计中，这种技术能够让原本平面的网页界面产生动感的立体效果。美女很养眼吧 :) 源码下载 在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果。 源码下载 在线演示 三种风格的全屏幻灯片效果 这个幻灯片效果是由四个区域的独立移动构成，通过画面分割，同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。 源码下载 在线演示 使用 CSS3 实现 3D 图片滑块效果 使用 CSS3 的3D变换特性，我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件，利用了 3D transforms（变换）属性来实现多种不同的效果。 源码下载 在线演示 单元素实现的 CSS 加载进度提示效果 之前的文章个大家分享过各种类型的加载效果（Loading Effects），这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的，十分强悍。 源码下载 在线演示 动感的页面加载动画效果 这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。 源码下载 在线演示 奇特的网格加载效果 向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。 源码下载 在线演示 使用 CSS3 制作网格动画效果 今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的。实现的基本思路是对网格项目进行 3D 旋转，扩展成全屏，并呈现内容。 源码下载 在线演示 超炫的复选框（Checkbox）效果 复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。 源码下载 在线演示 from:http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html
View DetailsBall Pool 是一个基于 HTML5 技术的实验，模拟现实物理效果，让你在 Web 中感受自然物体的运动。玩法介绍：可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键，有不同的效果，赶紧来体验一下。 源码下载 在线演示 实现各种 CSS3 文本动画效果 这个插件集成了一些非常好的 JavaScript 库，提供一个方便使用的文本动画插件，可以让你为网页中的文字运用各种动画。 源码下载 在线演示 离开你网站时显示模态弹窗 Ouibounce 是一个微小的库，用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。 源码下载 在线演示 实现各种好看的阴影效果 Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置，可定制的阴影。不依赖于第三方库，兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用，如果有需要会自动添加前缀。 源码下载 在线演示 表单填写进度提示效果 Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库，你需要做的就是添加表单，剩下的任务就交给 Fort.js 算法了，使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果，满足开发的各种场合需要。 源码下载 在线演示 HTML5 WebGL 实现逼真的云朵效果 使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。 源码下载 在线演示 带有数字显示的加载进度条效果 有的时候，在我们的应用程序中，我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 JavaScript 插件就是实现这个功能，易于使用和定制，而且是是免费开源的。 立即下载 在线演示 自适应的占位符效果 在早期，我们都是通过使用 JavaScript 来实现占位符功能。而现在，HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果（Adaptive Placeholder），当你输入的时候，提示文字不会消失，而是以动画的方式移动到了输入框的上方。 源码下载 在线演示 from:http://www.yyyweb.com/377.html
View DetailsWebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解。 1. Aquarium Image Source:www.webglsamples.org Created by Greggman and Human Engines. The aquarium runs almost entirely based on a clock.That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time. 2. 3 Dreams of Black Image Source:www.ro.me A Semi-Intereactive film authored by Chris Milk. It was developed using technology developed by Google […]
View DetailsJS部份
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function () { var $this = $(".renav"); var scrollTimer; $this.hover(function () { clearInterval(scrollTimer); }, function () { scrollTimer = setInterval(function () { scrollNews($this); }, 2000); }).trigger("mouseout"); }); function scrollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top": -lineHeight + "px" }, 600, function() { $self.css({ "margin-top": "0px" }).find("li:first").appendTo($self); }); } |
HTML部份
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style type="text/css"> .renav { width: 200px; height: 150px; line-height: 21px; overflow: hidden; background: #FFFFFF; } .renav li { height: 21px; } </style> <div class="renav"> <ul style="margin-top: 0px;"> <li><a>罗氏</a></li> <li><a>瑞声达</a></li> <li><a>未添加1</a></li> <li><a>未添加2</a></li> <li><a>未添加3</a></li> <li><a>未添加4</a></li> <li><a>西门子</a></li> <li><a>欧姆龙</a></li> </ul> </div> |
from:http://www.jb51.net/article/35149.htm
View Details最近做浏览器界面倒计时，用js就实现，两种方式： 一：设置时长，进行倒计时。比如考试时间等等 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <meta charset="UTF-8"> <title>简单时长倒计时</title> <SCRIPT type="text/javascript"> var maxtime = 60 * 60; //一个小时，按秒计算，自己调整! function CountDown() { if (maxtime >= 0) { minutes = Math.floor(maxtime / 60); seconds = Math.floor(maxtime % 60); msg = "距离结束还有" + minutes + "分" + seconds + "秒"; document.all["timer"].innerHTML = msg; if (maxtime == 5 * 60)alert("还剩5分钟"); --maxtime; } else{ clearInterval(timer); alert("时间到，结束!"); } } timer = setInterval("CountDown()", 1000); </SCRIPT> </head> <body> <div id="timer" style="color:red"></div> <div id="warring" style="color:red"></div> </body> </html> |
运行结果： 二：设置时间戳，进行倒计时。比如距离活动结束时间等等 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> <script type="text/javascript"> function countTime() { //获取当前时间 var date = new Date(); var now = date.getTime(); //设置截止时间 var str="2017/5/17 00:00:00"; var endDate = new Date(str); var end = endDate.getTime(); //时间差 var leftTime = end-now; //定义变量 d,h,m,s保存倒计时的时间 var d,h,m,s; if (leftTime>=0) { d = Math.floor(leftTime/1000/60/60/24); h = Math.floor(leftTime/1000/60/60%24); m = Math.floor(leftTime/1000/60%60); s = Math.floor(leftTime/1000%60); } //将倒计时赋值到div中 document.getElementById("_d").innerHTML = d+"天"; document.getElementById("_h").innerHTML = h+"时"; document.getElementById("_m").innerHTML = m+"分"; document.getElementById("_s").innerHTML = s+"秒"; //递归每秒调用countTime方法，显示动态时间效果 setTimeout(countTime,1000); } </script> </head > <body onload="countTime()" > <div> <span id="_d">00</span> <span id="_h">00</span> <span id="_m">00</span> <span id="_s">00</span> </div> </body> </html> |
运行结果： from:https://www.cnblogs.com/heizai002/p/6862418.html
View Details