随笔分类 -  页面Demo

敲起来！
表单填写示例（通过JavaScript访问DOM）
摘要：自己写就的代码，再烂也是自己的… 实现代码 页面效果 阅读全文
posted @ 2017-01-02 23:46 Jener_Yan 阅读(637) 评论(0) 推荐(0)
利用JavaScript函数对字符串进行加密
摘要：加密、解密问题对我来说一直是很神秘的，感到神奇无比。 理论了解 前段时间看到关于利用JavaScript函数unescape()和escape()对字符串进行替换处理。通过查资料得知， 同时的知，一个很重要的消息—— “ECMAScript v3反对使用该方法，应用decodeURI()和decod 阅读全文
posted @ 2016-11-28 19:36 Jener_Yan 阅读(6891) 评论(0) 推荐(0)
应用Css美化表单
摘要：原来的效果 美化之后的效果 美化之后的效果 实现代码 实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px; background-color:#c7fff5; } fieldset legend 阅读全文
posted @ 2016-11-06 20:10 Jener_Yan 阅读(1935) 评论(0) 推荐(0)
响应事件的示例
摘要：示例 1 onmousedown， onmouseup <script> function textcolor(cursor, i){ if(i ==0) cursor.style.color ="#0000FF"; else cursor.style.color ="#E7D745"; } </s 阅读全文
posted @ 2016-10-21 15:05 Jener_Yan 阅读(367) 评论(0) 推荐(0)
利用name或id属性设置页面跳转的锚点
摘要：理论准备 网页中的链接按照链接路径的不同，可以分为3种类型，分别是内部类型、锚点链接和外部链接； 按照使用对象的不同，网页中的链接又分为文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。 ★ 利用name或id实现网页跳转锚点的设置（Anchor）） 代码 <style> 阅读全文
posted @ 2016-10-18 10:17 Jener_Yan 阅读(8714) 评论(0) 推荐(0)
使用“原生”HTML DOM获取input的输入值并显示
摘要：理论基础 HTML <input> value属性。value规定<input>元素的值。value对于不同input类型，用法也不同。 1.对于"button","reset","submit"类型 —— 定义按钮上的文字； 2.对于"text","password","hidden"类型 ——定 阅读全文
posted @ 2016-10-14 11:03 Jener_Yan 阅读(24662) 评论(0) 推荐(0)
关于DOM树的常见增删操作
摘要：//具体关于DOM的内容可参考我的另外一篇文章“文本对象模型（Document Object Model）”. 案例要点： 1.创建并增加元素节点 2.判断是否存在子节点 3.新建节点插入指定子节点的前面 4.替换子节点 5.删除指定节点 ★ 示例一 创建并增加元素节点（appendChild(ch 阅读全文
posted @ 2016-10-12 18:43 Jener_Yan 阅读(1169) 评论(0) 推荐(0)
快捷获取浏览器（navigator对象）的全部属性
摘要：理论： navigator对象包含关于web浏览器的信息，浏览器的类型，版本信息都可以从该对象获取。 属性 说明 appCodeName 浏览器代码说明 appName 浏览器名称 appVersion 浏览器运行平台和版本 cookieEnable 浏览器是否接受Cookie onLine 浏览器 阅读全文
posted @ 2016-10-08 19:56 Jener_Yan 阅读(547) 评论(0) 推荐(0)
页面跳转的两种实现方法
摘要：★利用<meta>实现 参考代码 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="refresh"content="10;url=http://www.baidu.com"> <!--http 阅读全文
posted @ 2016-10-08 15:28 Jener_Yan 阅读(1227) 评论(0) 推荐(0)
三种对话框的示例（alert，confirm，prompt）
摘要：示例代码 <h2>JavaScriptDialog</h2> <hr/> <buttononclick="btn_alert()">alert：警告对话框</button> <buttononclick="btn_confirm()">confirm：确定操作对话框</button> <button 阅读全文
posted @ 2016-10-06 21:28 Jener_Yan 阅读(2872) 评论(0) 推荐(0)
使用BOM 的window对象属性打开新窗口
摘要：★ 示例1 要求：弹出新窗口，并向新窗口写入动态HTML代码 代码 <buttononclick="btnOpen()">打开新窗口</button> <hr/> <span>使用JavaScript打开一个新的浏览器选项卡，并向其中动态写入HTML代码</span> <script> functi 阅读全文
posted @ 2016-10-06 20:28 Jener_Yan 阅读(1808) 评论(0) 推荐(0)
响应式布局（Responsive layout，RL）的简单Demo
摘要：★背景： 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及 阅读全文
posted @ 2016-10-06 19:07 Jener_Yan 阅读(914) 评论(0) 推荐(0)
Chrome弹窗的简单应用（选择结构与循环结构）
摘要：★选择结构★ ★JS实现弹窗显示随机数 示例代码效果图 ★ 弹窗实现对随机数的进一步判断 示例代码效果图★综合应用 比较大小 ★ 判断成绩等级 <script>function score() { var userinput1 = window.prompt("请输入你的成绩：");var scor 阅读全文
posted @ 2016-09-13 16:39 Jener_Yan 阅读(533) 评论(0) 推荐(0)
3个简单的页面布局示例
摘要：本文内容： 1.利用HTML5及float布局 2.利用inline block布局 3.利用CSS表格（table）布局 示例代码 -1 (利用HTML5标签及浮动布局) <style> header nav ul { margin:15px; list-style: none; height:5 阅读全文
posted @ 2016-08-23 15:13 Jener_Yan 阅读(5536) 评论(0) 推荐(0)
报纸排版（分列示例）
摘要：column-count:3 分成3列显示；column-gap:50px 每列间隔50px ；column-rule-width:5px 列分隔线宽度；column-rule-color:blue 列分隔线颜色；column-rule-style:dashed 列分隔线线型 示例代码 <style 阅读全文
posted @ 2016-08-20 23:37 Jener_Yan 阅读(771) 评论(0) 推荐(0)
background的属性和背景图片定位的实例
摘要：本文内容： 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round、space属性 4.background-size的属性值（着重介绍contain、cover） 5.background-origin属性值（borde-box、padd 阅读全文
posted @ 2016-08-20 23:24 Jener_Yan 阅读(15788) 评论(0) 推荐(0)