Javascript - demo 与捷径

1.页面的后退.刷新.前进 function back(){ history.go(-1); // 后退 } function forward(){ history.go(+1); // 前进 1 页 } function refresh(){ history.go(0); // 刷新 } 2.保护自己的页面不被第三方页面放入iframe中 if(self != top) { top.location = self.location; } 3.当前页面调用其他页面也可以使用iframe来加载另…

【JavaScript Demo】回到顶部功能实现

随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布局 (1) 我们先简单的搭建一个长度为1200px的页面,保证视口的高度足够. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,声明了浏览器…

【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <div style=" width:88%;margin:30px auto; color:blue;" id="div_html"> </div> <script type="text/javascript"> var…

【Javascript Demo】遮罩层和百度地图弹出层简单实现

其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!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/x…

【Javascript Demo】无刷新预览所选择的图片

1.效果如下,可测试 2.代码如下 <!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-eq…

【Javascript Demo】防止按钮在短时间内被多次点击

如果一个按钮可以在短时间内多次点击,那么有可能会被用户恶意点击,为防止这种情况,可以设定一定时间内只能点击一次,其他时间禁止点击按钮. 1.效果如下: 2.代码如下: <div> <input type="button" value=" 点下我不会怀孕的 " id="btn" onclick="show()" /> </div> <script type="tex…

【Javascript Demo】遮罩层和弹出层简单实现

最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!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/xht…

javascript Demo

【Javascript Demo】图片瀑布流实现

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest.美丽说.蘑菇街这类型的网站. 下面是效果: 核心内容: 1.先设置布局主要HTML代码如下 <div id="container"> <div class="box"> <div class="co…

【Javascript Demo】根据Email地址跳转到相应的邮箱登录页面

我的初步想法是通过指定的邮箱地址自动查找到对应的邮箱登录页面,但是用数据库.js什么的都有局限性,因为各种各样的邮箱太多了,不能都包含的到,网上找了半天都没有找到满意的答案,自己又想不出方法,只能暂时用js实现了,这是网上找到的一段代码: //跳转到指定的邮箱登录页面 $(".btn_actemail").click(function () { var uurl = $(".hide_email").val(); uurl = gotoEmail(uurl); if…

【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用js链接,照着敲就行了. 下面是我写的示例和代码,仅供参考,点击查看地图,会弹出大的谷歌地图显示: 地址:4035 NORTH NELLIS BOULEVARD,LAS VEGAS 查看地图地图源代码下载:谷歌地图简单实现(附遮罩层和弹出层实现).zip…

谈谈JavaScript MVC模式

第一个是:没有使用mvc模式的: <!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-equ…

[ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="…

android与javascript相互调用

下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jquery mobile等.相信未来随着web app的发展我们同样可以使用html设计出和本地应用一样漂亮的界面.这些虽然很美好,但是现在还有很多弊端,比如比本地框架调用慢的多,因为手机是受限的设备,所以处理起来和反应都是比较慢的,期望未来会有较大的发展.哈哈! 废话不多说,下面来写一个WebViewD…

使用javascript调用android代码

1.使用webview对象的addJavascriptInterface方法 2.addJavascriptInterface方法有两个参数,第一个参数就是我们一般会实现一个自己的类,类里面提供我们要提供给javascript访问的方法:第二个参数是访问我们在obj中声明的方法时候所用到的js对象,调用模式为window.interfaceName.方法名()或者是javascript: interfaceName.方法名() ;,如myWebView.addJavascriptInterfac…

javascript入门之用bootstrap-table写一个表格

方法1(对普通的 table 设置 data-toggle="table" 即可): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lang="zh"/> <title>select2</title> <script src="js/jquery-3.3.1.js"…

news of javascript

news of javascript https://javascriptweekly.com/ https://javascriptweekly.com/issues https://www.infoworld.com/category/javascript/ https://hackr.io/news/javascript demo https://javascriptweekly.com/issues/460 https://javascriptweekly.com/link/79087/…

构建通用的 React 和 Node 应用

这是一篇非常优秀的 React 教程,这篇文章对 React 组件.React Router 以及 Node 做了很好的梳理.我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大.但是由于时间原因,直到现在才与大家分享,幸好赶在年底之前完成了译文,否则一定会成为 2016 年的小遗憾.翻译仓促,其中还有个别不通顺的地方,望见谅. 原文地址:Build a universal React and Node App 演示地址:https://judo-heroes.herokuapp.com/…

上传预览图片自己做的.md

1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览单个 $(".demo input#demo_file").on("change",function(){ var val_1 = $(this).val(); var valImg = window.URL.createObjectURL(document.getElementById("demo_file&quo…

[转]MVC、MVP、MVVM

界面之下:还原真实的 MVC.MVP.MVVM 模式 [日期:2015-10-28] 来源:github.com/livoras 作者:戴嘉华 [字体:大中小] 前言做客户端开发.前端开发对MVC.MVP.MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式.网上很多文章关于这方面的讨论比较杂乱,各种MV*模式之间的区别分不清,甚至有些描述都是错误的.本文追根溯源,从最经典的Smalltalk- 80 MVC模式开始逐步还原图形界面之…

Android WebView使用深入浅出

目前很多android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可以直接显示和渲染web页面,直接显示网页 webview可以直接用html文件(网络上或本地assets中)作布局和JavaScript交互调用一.基本使用首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1"…

http://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/ 非常棒的spring入门，maven，以及eclipse

http://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/ Simplest Spring MVC Hello World Example / Tutorial – Spring Model – View – Controller Tips Last Updated on 9 September, 2016 by App Shah 285 C…

jquery消息提示框

用于ajax类型提示的,只显示一个. 只是给个思路而已,代码有很多不足. 4个参数,有2个是可选调用 $.mTip('类型','显示内容',显示时间,回调函数) 类型: 0 为加载 1 为成功 2 为失败 3 为警告显示时间: 为整数型大于0, 小于0或非整数一直存在,不消失! 效果图: 渣渣效果一份: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>…

2015年4月 15款免费jQuery插件

点这里 We have collected for you the 15 fresh, free and handy jQuery plugins that will help to speed up the design of your projects and make it more user friendly. jQuery plugins are constantly being released, and it’s no surprise since they are insanel…

初级jQuery的使用

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/jque…

DWR

DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样. 它包含两个主要的部分:允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容. DWR采取了一个类似AJAX的新…

锋利的JQuery-Jquery选择器

1.css选择器标签选择器:a{...} id选择器:#note{...} 类选择器:div.note{..}..dream{...} 群组选择器:td,p,div,a{...} 后代选择器: #link a{...} 通配选择器:*{...} 2.jQuery选择器看一个小例子: <html> <head> <script src="../jquery-1.3.1.js" type="text/javascript"><…

粘帖屏幕截图到web页面插件 screenshot-paste

在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的.这就是本文要介绍的内容了. 由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目.为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste.运行效果如下图: 插件调用…

提示text还能输入多少字节

1.添加jQuery自定义扩展 $(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function(tipWrap, maxNumber){ var countClass = 'js_txtCount', // 定义内部容器的CSS类名 fullClass = 'js_txtFull', // 定义超出字符的CSS类名 disabledClass = 'disabled'; // 定义不可用提交按…

【Javascript - demo 与 捷径】的更多相关文章

【Javascript - demo 与捷径】的更多相关文章