杰哥个人博客|杰哥博客|厦门杰哥|杰哥主页|杰哥个人网站|杰哥网站 - 网页设计代码

杰哥个人博客|杰哥博客|厦门杰哥|杰哥主页|杰哥个人网站|杰哥网站 - 网页设计代码http://www.xmhjfb.com/厦门杰哥 - RainbowSoft Studio Z-Blog 1.8 Walle Build 91204zh-CNCopyright 2008-2022 WWW.XMHJFB.COM Rights Reserved 闽ICP备16020319号 document.write(unescape("%3Cspan id='cnzz_stat_icon_1067568'%3E%3C/span%3E%3Cscript src='https://s96.cnzz.com/stat.php%3Fid%3D1067568%26show%3Dpic' type='text/javascript'%3E%3C/script%3E")); 闽公网安备 35078402010016号Thu, 12 Mar 2026 06:10:33 +0800用JavaScript实现网站自动跳转电脑PC端与手机端不同页面a@b.com (roger)http://www.xmhjfb.com/post/133.htmlMon, 23 Nov 2020 12:48:03 +0800http://www.xmhjfb.com/post/133.htmlJS代码添加到访问页面头部或者单独设置一个页面，然后设置我们需要跳转的PC和手机端URL或者页面。

<script type="text/javascript">
function browserRedirect() {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
...

]]>网页设计代码http://www.xmhjfb.com/post/133.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=133http://www.xmhjfb.com/cmd.asp?act=tb&id=133&key=c06e6654实现拼图滑动验证码代码样式a@b.com (roger)http://www.xmhjfb.com/post/132.htmlWed, 18 Nov 2020 14:47:43 +0800http://www.xmhjfb.com/post/132.html

<!DOCTYPE html> <html> <head>     <title>滑动拼图验证码</title>     <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1582902_u0zm91pv15i.css">     <style type="text/css">         .verify-slide-con{ /* 滑动拼图容器块 */             width: 360px;             padding: 10px 20px;             border: 1px solid #eee;         }         .img-con{ /* 图片容器块 */             width: 100%;             height: 200px;             display: flex;             justify-content: center;             align-items: center;             overflow: hidden;             border: 1px solid #eee;             position: relative;         }         .img-con > .slide-block{ /* 图片区域的滑块 */             top: 0;             left: 0;             position: absolute;             height: 40px;             width: 40px;             display: none;             background-repeat: no-repeat;             background-attachment: scroll;             background-size: 360px 200px;             z-index: 10;             box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4);         }         .img-con > .slide-block-mask{ /* 图片区域的空缺区域 */             top: 0;             left: 0;             position: absolute;             height: 40px;             width: 40px;             display: none;             background-color: rgba(0, 0, 0, 0.4);         }         .img-con > .img{ /* 图片 */             width: 100%;             height: 100%;         }         .img-con > .loading{ /* 加载中样式 */             width: unset;             height: unset;         }         .slide-con{ /* 滑块容器 */             height: 40px;             margin: 10px 0;             position: relative;             border: 1px solid #eee;         }         .slide-con > .slide-btn{ /* 滑动按钮 */             height: 40px;             width: 40px;             position: absolute;             background: #4C98F7;             display: flex;             justify-content: center;             align-items: center;             cursor: pointer;         }         .icon-arrow-right{ /* 右箭头 */             font-size: 30px;             color: #fff;         }         .operate-con{ /* 操作容器块 */             border-top: 1px solid #eee;             height: 30px;             padding: 5px 0 0 5px;             display: flex;             align-items: center;         }         .icon-shuaxin1{ /* 刷新按钮 */             color: #777;             font-size: 20px;             cursor: pointer;         }     </style> </head> <body>     <div class="verify-slide-con"> <!-- 滑动拼图容器块 -->         <div class="img-con"> <!-- 图片容器块 -->             <img class="img"> <!-- 图片 -->             <div class="slide-block"></div> <!-- 拼图 -->             <div class="slide-block-mask"></div> <!-- 缺口 -->         </div>         <div class="slide-con"> <!-- 滑块容器 -->             <div class="slide-btn"> <!-- 滑动按钮 -->                 <i class="iconfont icon-arrow-right"></i> <!-- 图标 -->             </div>         </div>         <div class="operate-con"> <!-- 操作容器块 -->             <i id="refresh" class="iconfont icon-shuaxin1"></i> <!-- 刷新按钮 -->         </div>     </div> </body> <script type="text/javascript">     (function(){         var imgList = [ // 图片组             "http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg",             "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg",             "http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg",             "http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg",         ];         var imgCon = document.querySelector(".img-con"); // 图片容器元素引用         var img = document.querySelector(".img-con > .img"); // 图片元素引用         var slideBlock = document.querySelector(".img-con > .slide-block"); // 滑块元素引用         var slideBlockMask = document.querySelector(".img-con > .slide-block-mask"); // 缺口元素引用         var slideCon = document.querySelector(".slide-con"); // 滑动容器引用         var slideBtn = document.querySelector(".slide-con > .slide-btn"); // 滑块按钮引用         var refreshBtn = document.querySelector("#refresh"); // 刷新按钮引用         function randomInt(min=0, max=1) { // 生成随机数             return min + ~~((max-min)*Math.random()) // min <= random < max          }         function initSlider(){             var maxTop = imgCon.offsetHeight -                  ~~(window.getComputedStyle(slideBlock).getPropertyValue("height").replace("px","")); // 获取最大Y轴偏移距离             var maxRight = imgCon.offsetWidth -                  ~~(window.getComputedStyle(slideBlock).getPropertyValue("width").replace("px","")); // 获取最大X轴偏移距离             var randPosY = randomInt(0, maxTop); // 随机Y轴偏移             var randPosX = randomInt(60, maxRight); // 随机X轴偏移             slideBtn.onmousedown = function(e){                 slideBlock.style.display = "block"; // 显示拼图                 slideBlock.style.top=`${randPosY}px`; // 拼图Y轴偏移                 slideBlock.style["background-position"] = `-${randPosX}px -${randPosY}px`; // 指定背景图位置                 slideBlockMask.setAttribute("style", `display:block;top:${randPosY}px;left:${randPosX}px`); // 显示缺口并指定位置                 var edgeX = e.clientX; // 鼠标点击位置                 document.onmousemove = event => {                     var relativeX = event.clientX - edgeX; // 鼠标移动距离                     if(relativeX<0 || relativeX>imgCon.offsetWidth-this.offsetWidth) return void 0; // 判断是否超出滑动容器块 超出则不移动                     slideBlock.style.left = relativeX + "px"; // 移动拼图                     this.style.left =  relativeX + "px"; // 移动滑块按钮                 }                 document.onmouseup = function() {                     this.onmousemove = null; // 撤销事件                     this.onmouseup = null; // 撤销事件                     if(Math.abs(slideBlock.offsetLeft - slideBlockMask.offsetLeft)<=2) alert("验证成功"); // 偏移距离小于2则认为成功                     else alert("验证失败"); // 否则失败                     slideBlock.style.left = 0; // 拼图归位                     slideBtn.style.left =  0; // 滑块按钮归位                 };             }         }         function switchImg(){             slideBlock.style.display = "none"; // 不显示拼图             slideBlockMask.style.display = "none"; // 不显示缺口             img.classList.add("loading"); // 指定图片加载中样式             img.src="https://cdn.jsdelivr.net/gh/sentsin/layui@15d7241/dist/css/modules/layer/default/loading-2.gif"; // 加载动画             var newSrc = imgList[randomInt(0, 4)]; // 随机加载图片             var tmp = new Image(); // 隐式加载图片             tmp.src = newSrc; // 指定src             tmp.onload = function(){                 img.classList.remove("loading"); // 撤销loading                 img.src = newSrc; // 指定src 此时从缓存加载图片                 slideBlock.style["background-image"] = `url(${newSrc})`; // 拼图背景                 initSlider(); // 初始化滑块             }         }         (function(){             switchImg(); // 加载图片             refreshBtn.addEventListener("click", e => switchImg()); //  刷新按钮绑定事件         })();     })(); </script> </html>

...]]>网页设计代码http://www.xmhjfb.com/post/132.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=132http://www.xmhjfb.com/cmd.asp?act=tb&id=132&key=ae017318Js调用asp.net后台代码a@b.com (roger)http://www.xmhjfb.com/post/129.htmlTue, 27 Oct 2020 22:43:14 +0800http://www.xmhjfb.com/post/129.html

方法一：

1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;

2、在前台写一个js函数，内容为document.getElementById("btn1").click()

...]]>网页设计代码http://www.xmhjfb.com/post/129.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=129http://www.xmhjfb.com/cmd.asp?act=tb&id=129&key=fde89ae9窗体居中显示代码a@b.com (roger)http://www.xmhjfb.com/post/127.htmlMon, 10 Aug 2020 17:46:21 +0800http://www.xmhjfb.com/post/127.html使窗体居中：

this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;

加在需要显示的窗体代码中，打开后就会显示在屏幕正中心！亲测有效！

]]>网页设计代码http://www.xmhjfb.com/post/127.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=127http://www.xmhjfb.com/cmd.asp?act=tb&id=127&key=83761d1dWinForm 设置窗体在桌面区域全屏显示a@b.com (roger)http://www.xmhjfb.com/post/126.htmlMon, 10 Aug 2020 16:50:31 +0800http://www.xmhjfb.com/post/126.htmlusing System.Windows.Forms;

namespace WindowsFormsApplication1
{
public partial class Form1 : Form
...

]]>网页设计代码http://www.xmhjfb.com/post/126.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=126http://www.xmhjfb.com/cmd.asp?act=tb&id=126&key=f1f171c4WebBrowser控件使用a@b.com (roger)http://www.xmhjfb.com/post/125.htmlMon, 10 Aug 2020 16:27:42 +0800http://www.xmhjfb.com/post/125.htmlWebBrowser控件属性：

1、Application
如果该对象有效，则返回掌管WebBrowser控件的应用程序实现的自动化对象(IDispatch)。如果在宿主对象中自动化对象无效，程序将返回WebBrowser控件的自动化对象
2、Parent
返回WebBrowser控件的父自动化对象，通常是一个容器，例如是宿主或IE窗口
3、Containe
返回WebBrowser控件容器的自动化对象。通常该值与Parent属性返回的值相同
...

]]>网页设计代码http://www.xmhjfb.com/post/125.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=125http://www.xmhjfb.com/cmd.asp?act=tb&id=125&key=f6d85fbbMessageBox.Show()的各种用法a@b.com (roger)http://www.xmhjfb.com/post/124.htmlMon, 10 Aug 2020 16:24:35 +0800http://www.xmhjfb.com/post/124.html【函数】 <整型> MessageBox（<字符串> Text, <字符串> Title, <整型> nType，MessageBoxIcon）; 【函数说明】弹出一个消息框。【语法】参数： Text <字符串>，消息框的正文； Title <字符串>，消息框的标题； nType <整型>，消息框的类型。返

]]>网页设计代码http://www.xmhjfb.com/post/124.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=124http://www.xmhjfb.com/cmd.asp?act=tb&id=124&key=921bbf39解决HTML5手机端页面缩放的问题a@b.com (roger)http://www.xmhjfb.com/post/119.htmlWed, 22 Jul 2020 14:27:43 +0800http://www.xmhjfb.com/post/119.html通常在写HTML5手机端页面的时候，我们会发现页面所显示元素的比例不正确，那此时我们需要添加的就是： 1<meta name="viewport" content="width=device-width,initial-scale=1"> 或者是 1<meta name="viewport" content="

]]>网页设计代码http://www.xmhjfb.com/post/119.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=119http://www.xmhjfb.com/cmd.asp?act=tb&id=119&key=305132b2移动端H5页面的设计稿尺寸大小规范a@b.com (roger)http://www.xmhjfb.com/post/118.htmlWed, 22 Jul 2020 14:23:11 +0800http://www.xmhjfb.com/post/118.html当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦。那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。请注意：（以下所有讨论内容和规范均将viewport设定为content=&rdq

]]>网页设计代码http://www.xmhjfb.com/post/118.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=118http://www.xmhjfb.com/cmd.asp?act=tb&id=118&key=79827e35html5设置图片自适应屏幕宽度a@b.com (roger)http://www.xmhjfb.com/post/117.htmlWed, 22 Jul 2020 14:20:11 +0800http://www.xmhjfb.com/post/117.html在文件夹中创建css文件夹里面是css文件、hello图片、test的html文件。 2 打开test的html文件，在里面添加class为scale的div，里面放一张hello图片。 3 在浏览器中打开发现会一直保持大小，并不会缩放。 4 打开css文件夹中的hello的css文件，在里面设置.scale img的属性back

]]>网页设计代码http://www.xmhjfb.com/post/117.html#commenthttp://www.xmhjfb.com/http://www.xmhjfb.com/feed.asp?cmt=117http://www.xmhjfb.com/cmd.asp?act=tb&id=117&key=4fc664f5