http://www.chuanke.com/?mod=student&act=study&courseid=91706
-
智能社javascript
2015-01-09 00:14:00http://www.chuanke.com/?mod=student&act=study&courseid=91706 转载于:https://www.cnblogs.com/keyan1102/p/4212261.html转载于:https://www.cnblogs.com/keyan1102/p/4212261.html
-
JavaScript 智能社 拖拽
2016-09-13 14:50:00DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:100px; background:red; position:a...<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:400px; height:300px; background:#CCC; position:relative;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) { l=0; } else if(l>oDiv2.offsetWidth-oDiv.offsetWidth) { l=oDiv2.offsetWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>oDiv2.offsetHeight-oDiv.offsetHeight) { t=oDiv2.offsetHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; }; return false; }; }; </script> </head> <body> <div id="div2"> <div id="div1"></div> </div> </body> </html>
转载于:https://www.cnblogs.com/zapple/p/5868460.html
-
智能社- clock
2016-08-06 13:29:001. <...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>闹钟</title> </head> <body> <script> ...1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>闹钟</title> </head> <body> <script> function toDouble(num) {//格式化数字为双数 return num < 10 ? "0"+ num : ""+ num; //千万记得return 否则后面格式化时没有返回值,弹出undefined } function getDatesAndTimes(){//返回的是格式化过字符串时分秒 201608060941 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1;//注意月份需要+1 var day = date.getDate();//日 var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); var str = toDouble(year) + toDouble(month) + toDouble(day)+toDouble(hour)+toDouble(minute)+toDouble(second); return str; } //图片数组 var images = [ "images/0.jpg","images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg", "images/6.jpg","images/7.jpg","images/8.jpg","images/9.jpg","images/10.jpg","images/11.jpg" ]; window.onload = function () { //核心 str = 091623 目标:日期时间字符串与图片对应起来 var aImage = document.getElementsByTagName("image");//12张图片 var len = aImage.length;//提升效率用 getDatesAndTimes();//防止1s延时 setInterval(function () { var strDateAndTime = getDatesAndTimes();//当前的日期和时间 for(var i= 0; i < len; i++){ aImage[i].style.src = images[strDateAndTime.charAt(i)] //当前日期的第几位的数字就是图片数组的下标 } },1000); } </script> <div id="div1"> <ul> <li><image src="images/0.jpg"></image></li> <li> <image src="images/1.jpg"></image></li> : <li> <image src="images/2.jpg"></image></li> <li><image src="images/3.jpg"></image></li> : <li><image src="images/4.jpg"></image></li> <li><image src="images/5.jpg"></image></li> : <li><image src="images/6.jpg"></image></li> <li> <image src="images/7.jpg"></image></li> : <li> <image src="images/8.jpg"></image></li> <li><image src="images/9.jpg"></image></li> : <li><image src="images/10.jpg"></image></li> <li><image src="images/11.jpg"></image></li> </ul> </div> </body> </html>
转载于:https://www.cnblogs.com/bravolove/p/5743848.html
-
智能社简易日历
2016-07-18 00:05:59html> head> meta charset="utf-8"> title>无标题文档title> style> *{margin:0;padding:0} li{list-style:none;} body{background:#f6f9fc;font-family:Arial, Helvetica, sans-ser<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0} li{list-style:none;} body{background:#f6f9fc;font-family:Arial, Helvetica, sans-serif} .calendar{width:210px;margin:50px auto;padding:10px 10px 20px 20px;background:#eae9e9;} .calendar ul{width:210px;overflow:hidden;padding-bottom:10px;} .calendar li{ float:left; width:58px; height:54px; margin:10px 10px 0 0; border:1px solid #fff; background:#424242; color:#fff; text-align:center;cursor:pointer; } .calendar li h2{font-size:20px;padding-top:5px;} .calendar li p{font-size:14px;} .calendar li.active{border:1px solid #424242;background:#fff;color:#e84a87;} .calendar li.active p{font-weight: bold;} .calendar .text{width:178px;border:1px solid #fff;padding:10px 10px 10px;background: #f1f1f1;color:#555;} .calendar .text h2{font-size: 14px;margin-bottom: 10px;} .calendar .text p{font-size: 14px;line-height: 18px;} </style> <script> window.onload=function () { var arr=["快过年了,大家可以商量着去哪玩吧~", "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……", "HTML5开发课程,让你熟练掌握移动应用开发技术", "精通各种DOM类应用,熟练掌握面向对象编程思想(OOP)、熟悉JS面向对象开发方式 - 智能课堂 - www.zhinengshe.com", "熟练掌握AJAX技术及相关应用(例如:新浪微博级应用) - 智能课堂 - www.zhinengshe.com", "可以独立写出类似jQuery的小型库(支持各类选择符、事件类、DOM、自定义动画animate、AJAX……) - 智能课堂 - www.zhinengshe.com", "精通JS运动特效技术,能完整实现各类网站所有动画特效,如 智能课堂 官网 - 智能课堂 - www.zhinengshe.com", "掌握JS调试及优化技术、能兼容所有浏览器 - 智能课堂 - www.zhinengshe.com", "精通JS事件对象及事件的工作机制,并能完成各类跨平台应用模块的开发 - 智能课堂 - www.zhinengshe.com", "能独立开发表现和性能都很优秀的RIA应用 - 智能课堂 - www.zhinengshe.com", "了解后台编程的相关知识,能够和后台工程师配合完成大型交互应用 - 智能课堂 - www.zhinengshe.com", "熟悉正则表达式的编写、应用及高级表单验证技术 - 智能课堂 - www.zhinengshe.com"]; var oDiv=document.getElementById("topDiv"); var oLi=oDiv.getElementsByTagName("li"); var div=oDiv.getElementsByTagName("div")[0]; for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].onmouseover=function () { for(var i=0;i<oLi.length;i++){ oLi[i].className=''; } this.className='active'; div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; }; } }; </script> </head> <body> <div id="topDiv" class="calendar"> <ul> <li class="active"><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FER</p></li> <li><h2>3</h2><p>MAR</p></li> <li><h2>4</h2><p>APR</p></li> <li><h2>5</h2><p>MAY</p></li> <li><h2>6</h2><p>Jun</p></li> <li><h2>7</h2><p>JUL</p></li> <li><h2>8</h2><p>AUG</p></li> <li><h2>9</h2><p>SEP</p></li> <li><h2>10</h2><p>OCT</p></li> <li><h2>11</h2><p>NOV</p></li> <li><h2>12</h2><p>DEC</p></li> </ul> <div class="text"> <h2>1月活动</h2> <p>快过年了,大家可以商量着去哪儿玩吧</p> </div> </div> </body> </html>
-
[智能社] JavaScript案例特效 - 3D视差效果
2013-09-03 11:02:02智能社官方案例,供大家学习交流使用 智能社专注于web前端开发技术培训,目前推出HTML5、JavaScript和HTML+CSS三套课程 -
智能社石川 Nodejs+WebSocket+Html5 全栈VIP正式课
2020-02-11 17:01:09课程目录 1.数据交互 2.答疑+webSocket预习 3.webSocket进阶+node.js基础+数据库基础 ...5.ajax2.0+jsonp+HTML5预览 6.HTML5新特性讲解 7.HTML5新特性讲解-2 8.canvas详解等 下载地址:百度云网盘 ... -
目前最新《智能社石川 Nodejs+WebSocket+Html5》
2019-04-19 15:01:46课程目录 ... 5.ajax2.0+jsonp+HTML5预览 6.HTML5新特性讲解 " c+ p; Y$ }4 {- V- R% B 7.HTML5新特性讲解-2 , a$ ], v! X# A1 v. W* X 8.canvas详解等 " s 下载地址: 百度网盘 -
智能社官网顶部导航实现demo
2017-10-10 15:35:00从智能社的blue老师公开课中学习到了很多,在此表示感谢。 这个导航很好玩,于是就想实现一个。 html <div id="box"> <ul> <li><a href="javascript:void(0)">首页</a></... -
智能社的邀请码
2016-03-15 12:57:00http://www.zhinengshe.com/?reg_code=25970600455b1d3b41b4ca 转载于:https://www.cnblogs.com/busicu/p/5279033.html -
智能社讲解js基础
2014-05-10 15:18:00一,Javascript的组成ECMAScript:翻译,核心,解释器,DOM:文档对象模型,Document Object Model 操作HTML的能力,document对象BOM:浏览器对象模型,Browser Object Model window对象ECMA:几乎没有兼容问题DOM:有... -
智能社JavaScript学习笔记第四课
2018-07-01 19:18:00JS学习第四课 javaScript 基础 ...2.DOM 文档对象模型(Document Object Model) 操作HTML的能力 document 对html的操作统称dom操作 3.BOM 浏览器对象模型(Browser Object Model) 操作浏览器本身 windo... -
智能社JavaScript学习笔记第三课
2018-06-30 19:27:00JS学习第三课 选项卡 制作一个选项卡,有四个按键,按不同按键...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ... -
智能社JavaScript学习笔记第二课
2018-06-29 18:15:00JS学习第二课 函数传参:参数就是占位符————当函数里定不下来东西的时候用参数 ...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>c... -
智能社JavaScript学习笔记第一课
2018-06-28 17:16:00Html 和 Css 相当于盖大楼的一个框架,静态的布局,想要加效果修改样式靠JS,JS起到交互,实现功能的作用。 编写JS的流程: 1.首先要有布局:HTML + CSS 2.属性:确定修改哪些属性(我想实现什么效果、功能) ... -
智能社JS学习笔记(二)
2018-05-23 20:11:49DOM (Document Object Model 文档对象模型):赋予js操作HTML的能力,document。 BOM (Browser Object Modal 浏览器对象模型):赋予js操作浏览器的能力,window,不兼容不建议使用。——变量类型:num... -
智能社JS学习笔记(一)
2018-05-21 20:18:34转眼工作即将半年,这段时间自学了UI,html和css方面能比较熟练的掌握了,写过两套小程序的模板但只知其然不知其所以然(还是因为自己js基础知识掌握的不够啊)用bootstrap之类的框架能写一些常见的JS效果,但自己... -
智能社JS实现图片淡入淡出效果
2016-07-24 21:29:13我们在网站开发中有时会遇到图片淡入淡出效果这样的需求,我们首先来看下图片刚开始处于...那么这样的效果,JS怎么做到的呢,下面我粘出HTML、CSS及JS代码 html lang="en"> head> meta charset="UTF-8"> title -
智能社JavaScript学习笔记——JS运动基础
2015-06-09 03:44:591. 运动基础让Div运动起来<!DOCTYPE html> <html lang="en"> <title>Document #div1{width: 200px; height: 200px; background: red; position: absolute; -
React学习中的一个小实战(智能社)
2020-11-04 23:14:12最近在学习React,跟着前端blue大神学习基础,这是课程...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial -
JavaScript从入门到精通(智能社)- 数字时钟
2020-03-21 23:05:22DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l... -
智能社JavaScript 笔记1:基础入门篇(1)
2018-07-22 14:13:47布局: HTML + CSS 属性: 确定要修改哪些属性 事件: 确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 第一个JS特效——鼠标提示框 分析效果实现原理 样式: Div的display ... -
智能社JavaScript学习笔记——12-DOM操作应用
2015-05-28 16:23:53创建、插入和删除元素1. 创建DOM元素createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 (添加到末尾) //父级.appendChild(子节点)例子:为ul插入li...DOCTYPE html> <html> <title></title> </he -
用jquery改写智能社【是男人就撑20秒】
2013-06-11 07:32:26DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.... -
B站JavaScript从入门到精通智能社Blue石川老师视频部分代码_轮播图
2020-05-25 16:38:22从三月底开始,慢慢地上手了JavaScript,去年在学校放假前也看了一套视频,总...html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播动图</titl. -
B站JavaScript从入门到精通智能社Blue石川老师视频部分代码_幻灯片
2020-05-25 16:50:44DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>幻灯片</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } img { ... -
智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级
2015-06-03 03:45:59表格应用1. 获取tBodies、tHead、tFoot、rows、cells 注意: 一个表格可以有多个tbody (所以tBodies是复数,是一个数组),但是只能有一个thead,一个tfoot (tHead和tFoot不是数组,只是一个元素...DOCTYPE html> -
仿智能社官网:原生JS实现简单又酷炫的3D立方体时钟
2016-10-10 22:17:00先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客。 这里默认你已经做好了6个立方体,直接上JS代码: 页面进来的时候... -
一、初探Javascript魅力(1)_看智能社blue老师JS视频整理的笔记
2014-12-24 10:00:51(1)HTML+CSS静态页面,JS给页面添加动的效果 (2)网页特效的原理 javascript就是修改样式 (3)编写JS的流程: 【1】布局:HTML+CSS 【2】属性:确定要修改哪些属性 【3】事件:确定用户做哪些操作 【4】编写JS:... -
js 实现智能输入数字
2015-01-10 20:39:00<!doctype html> <html> <head> <meta charset="utf-8">...meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com"...
收藏数
204
精华内容
81
-
产品开发中如何进行敏捷测试?
-
一种光学通道开放且适合构建晶格的静电阱
-
MySQL 性能优化(思路拓展及实操)
-
记录一下服务器中的环境突然全部失效的原因
-
Apache.NMS.ActiveMQ.1.8.0.nupkg
-
Unity RUST 逆向安全开发
-
VMware vSphere ESXi 7 精讲/VCSA/VSAN
-
NoClassDefFoundError: org/apache/hadoop
-
深究字符编码的奥秘,与乱码说再见
-
python机器学习案例
-
jacob-1.19.rar
-
求助编程的时候发现X和Y都不能强制ON/OFF
-
基于微信的同城小程序、校园二手交易小程序 毕业设计毕设源码使用教程
-
基于太赫兹量子级联激光器的无线信号传输的实现
-
2021-03-02
-
对不同模型的数据处理(特征工程)步骤
-
CSS3动画.html
-
PowerBI重要外部工具详解
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
Mycat 实现 MySQL的分库分表、读写分离、主从切换