搜索到
12
篇与
的结果
-
倒计时js代码 Html<div id="all"> <div class="timetext"> <div>2023年元旦倒计时</div> <div>元旦时间：2023年1月1日</div> <div>目前距离2023年元旦还有</div> <div> <span id="t_d"></span> <span id="t_h"></span> <span id="t_m"></span> <span id="t_s"></span> </div> </div> </div> Jsfunction getRTime() { var EndTime = new Date("2023/01/01 00:00:00"); //截止时间 var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 0); -
-
产品360度旋转插件 Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。主要的特点有：支持水平或垂直方向旋转。支持移动触摸事件。支持滚动事件。图片预加载处理。可以反向和循环旋转图片。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>360度3D旋转</title> <style> #circlr { cursor: move; margin: 0 auto; min-height: 100px; position: relative; } #circlr #loader { background: url(../images/loader.gif) center center no-repeat; bottom: 0; display: none; left: 0; position: absolute; right: 0; top: 0; } </style> </head> <body> <div class="container"> <div id="circlr"> <div id="loader"></div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/circlr.min.js"></script> <script> // 图片太多用js动态添加 for (var i = 1; i <= 40; i++) { var img = $("<img data-src='images/" + i + ".png'/>"); $("#circlr").append(img); } </script> <script> $(function () { // 入口函数 ，等上面的图片加载完毕之后才执行 var crl = circlr('circlr', { scroll: true, // 滚动滚轮也能旋转 loader: 'loader' }) }) </script> </body> </html>参数mouse：是否通过鼠标进行图片旋转，默认值为true。scroll：是否通过scroll进行图片旋转，默认值为false。vertical：是否在垂直方向上移动鼠标时旋转图片，默认值为false。reverse：是否反转方向，默认值为false。cycle：是否循环旋转图片，默认值为true。start：开始动画帧，默认值为0。speed：动画帧通过circlr.turn(i)切换的速度，默认值为50毫秒。autoplay：是否自动进行图片360度旋转播放，默认值为false。playSpeed：动画序列的播放速度，默认值为100毫秒。loader：预加载DOM元素的ID。ready：图片加载完成后的回调函数。change：动画帧改编之后的回调函数（以当前帧和总帧数为参数）。方法crl.el：返回对象的DOM元素节点。crl.length：返回对象的总的动画帧数。crl.turn(i)：动画旋转到第i帧。crl.go(i)：动画跳转到第i帧。crl.play()：开始动画序列的播放。crl.stop()：停止动画播放。crl.hide()：隐藏对象的DOM元素节点。crl.show()：显示对象的DOM元素节点。crl.set(options)：在插件初始化之后改变对象的参数：verticalreversecyclespeedplaySpeed文件下载隐藏内容，请前往内页查看详情
-
移动端、pc端通用点击复制 <script> function copyArticle(event) { const range = document.createRange(); range.selectNode(document.getElementById('dd')); const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); $(this).text("已复制"); setTimeout(function () { $("#cp1").text("点击复制") }, 1000); } document.getElementById('cp1').addEventListener('click', copyArticle, false); </script>
-
Jq获取上传文件的名称类型及大小 上传多个文件需添加multiple属性：<input id="fUpload" multiple type="file" /> <ul id="ulList"></ul> <input id="btnShow" type="button" value="显示上传文件的详细" />先检测文件的数量通过循环来分别获取每个文件的详细信息：<script> $("#btnShow").on('click', function () { $("#ulList").empty(); var fp = $("#fUpload"); var lg = fp[0].files.length; // get length var items = fp[0].files; var fragment = ""; if (lg > 0) { for (var i = 0; i < lg; i++) { var fileName = items[i].name; // get file name var fileSize = items[i].size; // get file size var fileType = items[i].type; // get file type // append li to UL tag to display File info fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>"; } $("#ulList").append(fragment); } }); </script>
-
图片懒加载插件 <script src="https://rawgit.com/tuupola/jquery_lazyload/2.x/lazyload.js"></script> <img class="lazyload" src="thumbnail/example.jpg" data-src="example.jpg" /> <script> window.addEventListener("load", function (event) { let timeout = setTimeout(function () { azyload(); }, 5000); }); </script>
-
前端ajax规范写法 <script> $.ajax({ url: "http://1.1.1.1/api/v2/user/inviters", //接口 type: "post", //GET或POST data: JSON.stringify({}), //数据 headers: { 'Content-Type': 'application/json' }, //dataType: 'json', //返回的数据格式：json/xml/html/script/jsonp/text success: function (msg) { if (msg.data && msg.data.inviters) { addFimg(msg.data.inviters); } }, //回调成功方法 error: function (xhr, textStatus) { console.log(xhr); console.log(textStatus) } }); </script>
-
推荐一款好用的前端分享插件Share.js Share.js可以帮助你实现一键分享到微博、QQ空间、QQ好友、微信、Twitter等社交网站HTML使用方法<div class="social-share"></div> <!-- share.css --> <link rel="stylesheet" href="dist/css/share.min.css"> <!-- share.js --> <script src="dist/js/share.min.js"></script> // 当你使用类名为 `social-share` 或者 `social-share` 时不需要手动初始化自定义配置所有配置可选， 通常默认就满足需求：var $config = {}; socialShare('.social-share', $config)可用的配置有：url: '', // 网址，默认使用 window.location.href source: '', // 来源（QQ空间会用到）, 默认读取head标签 title: '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" /> description: '', // 描述, 默认读取head标签 image: '', // 图片, 默认取网页中第一个img标签 sites: ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点 disabled: ['google', 'facebook', 'twitter'], // 禁用的站点 wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字 wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
-
网站添加社会主义核心价值观鼠标点击特效 JS代码如下放在网站中就可以使用了<script> if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { } else { var a_idx = 0; jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999, top: y - 20, left: x, position: "absolute", "font-weight": "bold", color: "#26047d" }); $("body").append($i); $i.animate({ top: y - 180, opacity: 0 }, 1500, function () { $i.remove() }) }) }) } </script>
-
