js代码 | 易学教程

回顾JS第一章如何在HTML文件中添加JavaScript代码

阅读更多关于回顾JS第一章如何在HTML文件中添加JavaScript代码

JavaScript入门篇—第1章请做好准备本章节主要讲解如何在HTML文件中添加JavaScript代码，掌握必备的基础语法，为以后来章学习打下基础。 1-1 为什么学习JavaScript 1-2 新朋友你在哪里（如何插入JS） 1-3 我也可以独立（引用JS外部文件） 1-4 找到你的位置（JS在页面中的位置） 1-5 JavaScript-认识语句和符号 1-6 JavaScript-注释很重要 1-7 JavaScript-什么是变量 1-8 JavaScript-判断语句（if...else） 1-9 JavaScript-什么是函数 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>为什么学习JavaScript</title> 6 </head> 7 <body> 8 <ul> 9 <li id="ceshi1">所有主流浏览器都支持JavaScript。</li> 10 <li id="ceshi2">目前，全世界大部分网页都使用JavaScript。</li> 11 <li>它可以让网页呈现各种动态效果。</li> 12 <li>做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</li> 13 </ul> 14

一个相当酷的js图片展示网站

阅读更多关于一个相当酷的js图片展示网站

在站酷上搜到一个相当酷的js图片展示网站 http://preview.zcool.com.cn/code/js/04/1/ 更酷的是，页面里包含全部的js代码！wow！！！！！！！！！！保存下面的代码，自己放上几张图试下，绝对效果超赞。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd "> <html> <head> <title>1</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; } #imageFlow { position: absolute; width: 100%; height: 80%; left: 0%; top: 10%; background: #000; } #imageFlow .diapo { position: absolute; left: -1000px; cursor: pointer; -ms

js在ie与fx下增删表格行

阅读更多关于 js在ie与fx下增删表格行

1 2008年03月04日星期二 15 : 14 2 效果图如下： 3 4 5 　　点“添加参与人”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行，“清空”则删除所有的行。 6 　　这种效果在需要批量添加数据的时候非常有用，可以在客户端添加完一批数据，然后通过AJAX一次提交给服务器处理，下面是完整代码： 7 8 Body部份： 9 < div > 10 < table width = " 613 " border = " 0 " cellpadding = " 2 " cellspacing = " 1 " id = " SignFrame " > 11 < tr id = " trHeader " > 12 < td width = " 27 " bgcolor = " #96E0E2 " > 序号 < / td> 13 < td width = " 64 " bgcolor = " #96E0E2 " > 用户姓名 < / td> 14 < td width = " 98 " bgcolor = " #96E0E2 " > 电子邮箱 < / td> 15 < td width = " 92 " bgcolor = " #96E0E2 " > 固定电话 < / td> 16 < td width = " 86 " bgcolor = " #96E0E2 " >

网页背景动态连线动画效果的实现

阅读更多关于网页背景动态连线动画效果的实现

使用 canvas-nest.js 下载地址： http://www.jfinalxueyuan.com/assets/js/canvas-nest.js 放在web下的js目录在网页body最后添加代码 <script color="255,255,255" opacity='0.3' zIndex="-1" count="110" src="/js/canvas-nest.js" type="text/javascript"></script> 刷新网页，可看到以下效果来源： oschina 链接： https://my.oschina.net/peaksoho/blog/3223429

Js完成ListBox内容的交互实例

阅读更多关于 Js完成ListBox内容的交互实例

这几天在做一个关于大学排名的网站，其中遇到了上图中的问题，需向某个对象中添加新的学校群体，这就用到了 ListBox，而要进行两个ListBox之间的交互，无疑有两个办法：一个是在服务器端与客户端不停的PostBack，这无疑会大大降低效率。这是就体现出JavaScript在客户端的优势。下面介绍一下，又不足的地方希望大家指出！下面是JS代码：用四个函数分别对应四个按钮，完成该功能。 < script type = " text/javascript " > function SelectAll() { var lst1 = window.document.getElementById( " <%=lb_Sourse.ClientID %> " ); var length = lst1.options.length; var string = window.document.getElementById( " <%=hf_NewName.ClientID %> " ) for (var i = 0 ;i < length;i ++ ) { var v = lst1.options[i].value; var t = lst1.options[i].text; var lst2 = window.document.getElementById( " <%=lb_NewName

JS模拟抽奖

阅读更多关于 JS模拟抽奖

代码如下: <html> <title>模拟抽奖(Dicky.CnBlogs.Com)</title> <head> <meta name="keywords" content="Dicky,AppleBBS,Dicky.CnBlogs.Com"> <meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <SCRIPT LANGUAGE="JavaScript"> var alldata = "青苹果论坛,Dicky.8800.Org/BBS1,Dicky.CnBlogs.Com,AppleBBS,Dicky,大雨点,51windows,blueidea,csdn,google,baidu,msn,qq,cctv,microsoft,adobe" //抽奖的姓名，以,为分隔 var alldataarr = alldata.split(",") var num = alldataarr.length-1 var timer function change(){ document.getElementById("oknum").value = alldataarr[GetRnd(0,num)]; } function start(){ clearInterval(timer);

js清空array数组的方法

阅读更多关于 js清空array数组的方法

方式1，splice Js代码 var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 []，空数组，即被清空了方式2，length赋值为0 这种方式很有意思，其它语言如Java，其数组的length是只读的，不能被赋值。如 Java代码 int [] ary = { 1 , 2 , 3 , 4 }; ary.length = 0 ; Java中会报错，编译通不过。而JS中则可以，且将数组清空了，如 Js代码 var ary = [1,2,3,4]; ary.length = 0; console.log(ary); // 输出 []，空数组，即被清空了目前 Prototype中数组的 clear 方法和mootools库中数组的 empty 方法使用这种方式清空数组。方式3，赋值为[] Js代码 var ary = [1,2,3,4]; ary = []; // 赋值为一个空数组以达到清空原数组 Ext库Ext.CompositeElementLite类的 clear 方法使用这种方式清空。方式2 保留了数组其它属性，方式3 则未保留。很多人认为方式2的效率很高些，因为仅仅是给length重新赋值了，而方式3则重新建立个对象。经测试恰恰是方式3的效率高。测试代码： Js代码

jquery ui实现图片拖拽排序

阅读更多关于 jquery ui实现图片拖拽排序

这几天公司后台改版，老板让实现一个拖拽图片实现排序的效果。本人水平一般，这个效果感觉好难！小公司一枚，也没高手。无可奈何之下，只得求助度娘，搜了一个下午也没发现太好的插件或代码。回到桌面，看到了JQUERY UI刚用这个实现了一个拖拽效果。随便打开demos。发现了这个sortable文件夹，打开后喜极而泣。真是众里寻他千百度，废话不说了，上代码。下面的是完成后效果。 HTML如下： <div class="table_row" id="sortable" style="z-index:0"> <div class="order_img or_active"> <img src="images/cover.jpg" width="169" height="113" /> <div class="mark_o png">1</div> </div> <div class="order_img or_active"> <img src="images/cover.jpg" width="169" height="113" /> <div class="mark_o png">1</div> </div> </div> JS如下： <script type="text/javascript" src="js/jquery.js"></script> <script type=

JS动态写入HTML代码《变量，方法，函数多个入参拼接》

阅读更多关于 JS动态写入HTML代码《变量，方法，函数多个入参拼接》

写这篇文章，主要是想mark一下，因为JS动态生成HTML（这里都默认是生成大段的HTML，而不是简单的标签元素），常用的两种语法格式：一种是es6的写法，反撇，' `` '，在英文语法输入状态下，esc正下方的按键。但是这种语法存在兼容性的问题，我在移动端的项目中遇到过，使用JQuery，没有使用框架。因为有一整个页面都是使用JS动态生成的HTML，所以，在一款华为手机自带的浏览器中不识别 `` ，页面空白。另一种是字符串拼接，但是这种方式，拼接方法及方法入参时特别特别特别的繁琐，特别要注意单引号和双引号的使用，在外层双引号里单双引号，代码如下： goodsHtml += '<div class="goods-list-line">' + '<div class="goods-show">' + '<img class="goods-img" alt="goodsImg" src=' +resGoodsInfo.logoUrl+ '>' + '<p class="goods-name small-text-style">' + resGoodsInfo.goodsName + '</p>' + '</div>' + '<div class="btn-line">' + '<div class="display-inline-block">' + "<button class=

js上拉分页

阅读更多关于 js上拉分页

js实现上拉加载，页面分页的代码。 $(function () { var all = 10; //后台返回总页面 var pageNum = 1;//定义初始页面 var pageSize = 10; // 每页显示的个数 var close = true; // 因为ajax是异步请求，所以设置一个boolean类型，将ajax控制为同步请求 $(window).scroll(function() { var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var windowHeight = $(this).height(); //当前window也就是浏览器的高度 if(parseInt(scrollTop) + parseInt(windowHeight) == parseInt(scrollHeight)) { // 如果class为true 并且当前页数小于或等于总页数 if (close && pageNum <= all) { pageNum += 1; //将close改为false，无法在请求后台 close = false; $.ajax({ url:'', // 请求地址 data:{ pageNum

订阅 js代码