评论 - lizhenqiu blog

#⁶⁴⁷

作者：广西南宁市

原生js轮播图（原创）

<style>
html,body,div,ul,li {
	padding:0;
	margin:0;
}
ul,li,ol {
	list-style:none;
}
.box {
	position:relative;
	width:600px;
	height:300px;
	margin:20px auto;
}
.picture {
	width:600px;
	height:300px;
	overflow:hidden;
	position:absolute;
}
.picture ul {
	position:absolute;
	width:2400px;
	height:300px;
}
.picture ul li {
	float:left;
	width:600px;
	height:300px;
}
.control {
	position:absolute;
	bottom:0px;
	left:450px;
}
.control li {
	cursor:pointer;
	float:left;
	width:20px;
	height:20px;
	text-align:center;
	line-height:20px;
	background:lightblue;
	margin:4px;
	border-radius:5px
}
.control .active {
	background:yellow;
}
</style>
<div class="box" id="box">
    <div class="picture">
        <ul id="picture">
            <li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="600px" height="300px"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-2.png" width="600px" height="300px"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-3.png" width="600px" height="300px"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="600px" height="300px"></li>
        </ul>
    </div>
    <ol class="control" id="control">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>
<script>
var box = document.getElementById("box");
var picture = document.getElementById("picture").children;
var control = document.getElementById("control").children;
var ul = document.getElementById("picture");

for (var i = 0; i < control.length; i++) {
    control[i].index = i;
    control[i].onclick = function() {
        for (var j = 0; j < control.length; j++) {
            control[j].className = "";
        }
        this.className = "active";
        animate(ul, -this.index * 600, 10);
    }
}


var k = 0;

function autoPlay() {
    k++;
    if (k > control.length) {
        ul.style.left = 0 + "px";
        k = 1;
    }
    animate(ul, -k * 600, 10);

    for (var i = 0; i < control.length; i++) {
        control[i].className = "";
    }
    var index = k % control.length;
    control[index].className = "active";
}

var tim = setInterval(autoPlay, 2000);

box.onmouseover = function() {
    clearInterval(tim);
}

box.onmouseout = function() {
    tim = setInterval(autoPlay, 2000);
}





function animate(ele, target, ms) {

    clearInterval(ele.timer);
    //方便清除本元素上一次的定时器操作
    ele.timer = setInterval(function() {
        //判断目标元素是向左或者向右（）
        var step = ele.offsetLeft < target ? 10 : -10;
        var result = Math.abs(target - ele.offsetLeft);
        /*到动画最后移动步长时*/
        if (result < 10) {
            clearInterval(ele.timer);
            ele.style.left = target + 'px';
        } else {
            //向目标元素发生位移。
            ele.style.left = ele.offsetLeft + step + 'px';
        }
    }, ms);

}
</script>

Run code

Cut to clipboard

#,广西南宁市,2018-01-24,14:31:25, CSS3实现无缝轮播

<style>* {
	padding:0;
	margin:0;
	list-style:none;
}
.banner {
	width:640px;
	height:300px;
	overflow:hidden;
	margin:0 auto;
}
.inner {
	width:9999px;
	position:relative;
	animation:aaa 16s infinite 2s running;
}
@keyframes aaa {
	0% {
	transform:translateX(0px);
}
5% {
	transform:translateX(-640px);
}
25% {
	transform:translateX(-640px);
}
30% {
	transform:translateX(-1280px);
}
50% {
	transform:translateX(-1280px);
}
55% {
	transform:translateX(-1920px);
}
75% {
	transform:translateX(-1920px);
}
80% {
	transform:translateX(-2560px);
}
100% {
	transform:translateX(-2560px);
}
}.inner:hover {
	animation-play-state:paused;
	cursor:pointer;
}
.innerwrapper {
	float:left;
	width:640pxpx;
}
.banner img {
	width:640px;
	height:300px;
}
</style>
<div class="banner">
    <div class="inner">
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="banner1"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt="banner2"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/300x500-1.png" alt="banner3"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-2.png" alt="banner4"></div>
        <div class="innerwrapper"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="banner1"></div>
    </div>
</div>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-24, 14:25:49

展开↯

#⁶⁴⁸

作者：广西南宁市

跨浏览器检测视窗大小

var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数：获取尺寸 
{ 
//获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//通过深入Document内部对body进行检测，获取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//结果输出至两个文本框 （在这里对获取到的参数进一步使用）
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); 
//调用函数，获取数值 
window.onresize=findDimensions;

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-24, 14:23:19

展开↯

#⁶⁴⁹

作者：广西南宁市

canvas圆圆圈圈的动态效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,shrink-to-fit=no" />
  <title> 上下班路上的那一幅静态广告 </title>
  <style>
    .stage{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:800px;max-width:100%;border:1px solid #CCC;}
  </style>
 </head>
 <body>
  <canvas class="stage" width="800" height="500"></canvas>
  <script>
    "use strict";
	(function(query){
	    var ARC=0.004,
		    ANGLE=10,
			PI2=Math.PI*2,
			NUM=150,
			VELOCITY=3;

	    function Scene(ctx,width,height){
		   this.ctx=ctx;
		   this.width=width;
		   this.height=height;
		   this.sprites=[];
		   ctx.globalCompositeOperation="lighter";

		   this.render=this.render.bind(this);
		}

		Scene.prototype={
		   add:function(sprite){
		      this.sprites.push(sprite);
		   },
		   render:function(timer){
		      var sprites=this.sprites,ii=sprites.length,i=ii,ctx=this.ctx,w=this.width,h=this.height;
			  
			  ctx.clearRect(0,0,width,height);
		      requestAnimationFrame(this.render);

              while(i){
			    sprites[--i].update(timer,w,h);
			  }
			  for(;i<ii;i++){
			    sprites[i].draw(ctx);
			  }

			  this.make(ii);
		   },
		   start:function(){
		     this.render();
		   },
		   make:function(num){
		      if(num<NUM){
			   var radius=getRadius();
				   num++;
				   this.add(new BallArtist("",-radius,height/2,radius,getColor(),getAngle()));
			  }
		   }
		};

		function Sprite(draw,behaviors){
		   this.draw=draw;
		   this.behaviors=behaviors||[];
		}

		Sprite.prototype.update=function(timer,w,h){
		    var behaviors=this.behaviors,
			    i=0,
				ii=behaviors.length;

			for(;i<ii;i++){
			   behaviors[i].call(this,timer,w,h);
			}
		};

		function BallArtist(name,x,y,radius,color,angle){
		   this.name=name,
		   this.x=x;
		   this.y=y;
		   this.v=Math.random()*VELOCITY+VELOCITY;
		   this.radius=radius;
		   this.color=color;
		   this.angle=angle;
		   this.vr=Math.random()*ARC*(angle>0?1:angle<0?-1:0);
		}

		BallArtist.prototype=new Sprite(function(ctx){
		    ctx.beginPath();
			ctx.fillStyle=this.color;
			ctx.arc(this.x,this.y,this.radius,0,PI2);
			ctx.fill();
		   
		},[function(timer,width,height){
		    if(this.x>width+this.radius || this.y<-this.radius || this.y>height+this.radius){
              var radius=getRadius();
			  this.reset(-radius,height/2,radius,getColor(),getAngle());
			  return;
			}
			this.angle+=this.vr;

			var sin=Math.sin(this.angle),
			    cos=Math.cos(this.angle);
			
			this.x+=cos*this.v;
			this.y+=sin*this.v;
		}]);

		BallArtist.prototype.reset=function(x,y,radius,color,angle){
		   this.x=x;
		   this.y=y;
		   this.v=Math.random()*VELOCITY+VELOCITY;
		   this.radius=radius;
		   this.color=color;
		   this.angle=angle;
		   this.vr=Math.random()*ARC*(angle>0?1:angle<0?-1:0);
		};		

		var cvs=document.querySelector(query),
		    ctx=cvs.getContext("2d"),
			width=cvs.width,
			height=cvs.height,
			num=0,
			scene=new Scene(ctx,width,height),
			color=["hsla(",0,",100%,30%,.8)"],
			angle=Math.PI/180*ANGLE,
			radius;

			function getColor(){
			   color[1]=Math.random()*360;
			   return color.join("");
		    }

			function getAngle(){
			  return Math.random()*angle-(angle/2);
			}

			function getRadius(){
			  return 20*Math.random()+5;
			}


			scene.start();


	})("canvas");
  </script>
 </body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-24, 11:45:59

展开↯

#⁶⁵⁰

作者：广西南宁市

a++ 与 ++a 的区别：

#include <stdio.h>
 
int main()
{
   int c;
   int a = 10;
   c = a++; 
   printf("先赋值后运算：\n");
   printf("Line 1 - c 的值是 %d\n", c );
   printf("Line 2 - a 的值是 %d\n", a );
   a = 10;
   c = a--; 
   printf("Line 3 - c 的值是 %d\n", c );
   printf("Line 4 - a 的值是 %d\n", a );
 
   printf("先运算后赋值：\n");
   a = 10;
   c = ++a; 
   printf("Line 5 - c 的值是 %d\n", c );
   printf("Line 6 - a 的值是 %d\n", a );
   a = 10;
   c = --a; 
   printf("Line 7 - c 的值是 %d\n", c );
   printf("Line 8 - a 的值是 %d\n", a );
 
}

Run code

Cut to clipboard

#,广西南宁市,2018-01-22,17:46:57,

#,广西南宁市,2018-01-22,17:52:31, 利用异或 ^ 来交换两个数的值，而且不引入其他变量

unsigned int a=60;  //0011 1100
unsigned int b=13;  //0000 1101
a=a^b;              //a=a^b=0011 0001
b=a^b;              //b=a^b=0011 1100  相当于b1=(a^b)^b
a=a^b;              //a=a^b=0000 1101  相当于a1=(a^b)^((a^b)^b)

Run code

Cut to clipboard

实例

#include<stdio.h>

int main( )
{
    unsigned int a=60;         //0011 1100
    unsigned int b=13;         //0000 1101
    printf("a=%d,b=%d",a,b);   //输出a，b的值
    printf("\n");
    a=a^b;                     //a=a^b=0011 0001
    b=a^b;                     //b=a^b=0011 1100
    a=a^b;                     //a=a^b=0000 1101
    printf("a=%d,b=%d",a,b);   //输出a，b的值
}

Run code

Cut to clipboard

结果：

a=60，b=13；
a=13，b=60；

Run code

Cut to clipboard

#,广西南宁市,2018-01-22,17:54:39, 注意：您可以按 Ctrl + C 键终止一个无限循环。

文章：C语言学习笔记发表时间：2018-01-22, 17:46:49

展开↯

#⁶⁵¹

作者：广西南宁市

文章：C语言学习笔记发表时间：2018-01-22, 11:51:56

展开↯

#⁶⁵²

作者：广西南宁市

大扎好，我系轱天乐，我系脏渣辉，贪挽懒夜，里没有挽过的船新版本，挤需体验三番钟，里一定会干我一样，爱桑介款游戏，今晚的传奇，我揍系你的松弟！

#,广西南宁市,2018-01-21,23:45:37, 欧，我的天，瞧瞧这个优秀答案，我亲爱的上帝，这是汤姆斯.陈独秀先生的奖杯，是谁把它拿到这儿来的。来，我亲爱的汤姆斯，这是你的，摸它之前记得用蒂花之秀洗手液，这会让您显得庄重一些.

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-01-21, 22:40:17

展开↯

#⁶⁵³

作者：广西

手机点击空白失去焦点收起小键盘容易点到别的地方，页面伪顶上去？

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-01-20, 18:56:11

展开↯

#⁶⁵⁴

作者：广西南宁市

h5页面，关闭手机键盘

document.activeElement.blur();

Run code

Cut to clipboard

		<script>
			//图片取消上传
			$("body").on("mousemove touchstart tap",function(){
			//$("body").mousemove(function(){
				<?php
					if($Applessss) echo'document.activeElement.blur();';
				?>
				//if($("input").is(":focus")) $("input").focus();
				var sdfdsunmppsss=$('#sdfdsunmpp dot').text();
				//console.log(sdfdsunmppsss);
				if(sdfdsunmppsss=='select') $('#sdfdsunmpp').html('<a href="javascript:;" onclick="$(\'#sdfdsunmpp\').html(\'<dot>select</dot>\');if ((navigator.userAgent.indexOf(\'MSIE\') >= 0) && (navigator.userAgent.indexOf(\'Opera\') < 0)) alert(\'请更换你的破浏览器！\');path.click();" style="cursor: pointer;color: #666;text-decoration: underline;">UpImg</a>');
				
			});
		</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-20, 18:42:23

展开↯

#⁶⁵⁵

作者：广西南宁市

从正常的历史上来看，东北就不应该那么发达。
东北在历史上只有2个发展时期，一是闯关东，二是一五计划二五计划时期，一个是关内人到关外谋生，一个是国家一穷二白，大力投入建设一些地区的时期。
但是现在，东北并没有什么优势，强行投入发展不过是一厢情愿。
不如顺势而为，合并东三省，集中建设大城市，进行大规模机械化农业，发展农业相关产业，让人口流走，最多能保留在环渤海一带就不错了。
想恢复共和国长子的地位，属于不可能的情况。

#,广西南宁市,2018-01-18,10:20:45,
你慢慢有了区域自主的意识了，他马上再给你开个空头支票，让你意识到国家还没忘了你，于是你的那种刚刚萌发的自主意识又消失了。
然而那是拿着鸡毛当令箭的空头支票。最后绝对不会有没有效果，反映在经济上就是还是一般，于是这一般的经济增速和高调宣传的空头支票之间的强烈反差。于是又开始投资不过山海关的宣传了，又是一顿舆论围剿
-
然后再重复上面的动作，几轮下来，你也就从假衰落变成真衰落了。

#,广西南宁市,2018-01-18,10:26:40,
儿子：妈妈，小姨来我家玩，我爸趁她没注意就亲了她一口。
小姨气得朝着爸爸的脸上打了一掌的“掌”是怎么写的？
妈妈：啊？

#,广西南宁市,2018-01-18,10:29:33, 如果把食物放在温暖的地方会滋生细菌，这或许能解释为什么把地球放在太阳旁边会长出我们。

#,广西南宁市,2018-01-18,10:37:33, 喜欢喝酒的绿色小猪，希望自己的死法是清蒸。

#,广西南宁市,2018-01-18,11:09:37, 时代在进步，社会在发展。以前进门拖鞋，现在进门戴套。这都是为了适应新时代服务业的需要

#,广西南宁市,2018-01-19,15:19:45, 公司聚会喝了点酒，总有些年轻的同事误以为这是一个说真话的时机。

文章：一个制片人的自白发表时间：2018-01-18, 10:19:11

展开↯

#⁶⁵⁶

作者：广西

苹果手机上传GIF不动

#,广西南宁市,2018-01-17,11:25:34, edge导航固定右边目录滚动到最后一个有时候会闪烁

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-01-16, 22:21:13

展开↯

#⁶⁵⁷

作者：广西南宁市

thinkphp模块名不区分大小写

define('APP_DEBUG','false');

Run code

Cut to clipboard

#,广西南宁市,2018-01-16,21:14:36, mysql 查询某个字段不为空（附thinkphp写法）
Thinkphp中如何表达MYSQL中的某字段不为空is not null

$where['door_open_api_key'] = array('exp',' is not null AND door_open_api_key != ""');

Run code

Cut to clipboard

thinkphp mysql 空字段

文章：Yourphp，thinkphp修改分页代码发表时间：2018-01-15, 16:51:57

展开↯

#⁶⁵⁸

作者：广西南宁市

手机网站二级栏目自动居中

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>


<ul class="clearUl" id="menuullidemoli">
	<li>范德萨发达省份</li>
	<li>32432</li>
	<li>34</li>

</ul>


<script>
(function (d){
	$(d).css('clear','both');
	var nw;
	var t=0;
	$(d+' li').each(function(){
		$(this).css('display','inline-block');
		nw=$(this).width();
		t=t+nw;
	});
	var pw=$(d).width();
	//console.log(pw);
	if(pw<t){
		$(d+' li').each(function(){
			$(this).css('float','left');
		});
	}else{
		$(d).css('textAlign','center');
	}
})("#menuullidemoli"); //ul id
</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2018-01-15, 15:34:24

展开↯

#⁶⁵⁹

作者：广西南宁市

this.setData() 异步回调

this.setData({userInfo: userInfo}, callback)

Run code

Cut to clipboard


 */
  onLoad: function (options) {
    var that = this;
  
    App.editTabBar(that);
  
   // var ajaxdata
 //console.log(that.data);
  
    var url = 'https://ssl.resonance.net.cn/test/index.php/Home/About/index';
    util.ntime(utilMd5, that, url, "calll");

    
    
  },
  calll: function (that,res){
    //console.log(res.content)
    WxParse.wxParse('article', 'html', res.content, that, 5);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

function updatenew(url, token, that, calll) {
 that.setData(res.data, that.calll(that,res.data))

Run code

Cut to clipboard

#,广西南宁市,2018-01-06,17:23:18,

setTimeout(回调函数,时间,参数1,...,参数n)

Run code

Cut to clipboard

#,广西南宁市,2018-01-15,14:54:11,

文章：微信小程序开发笔记发表时间：2018-01-06, 17:19:13

展开↯

#⁶⁶⁰

作者：广西

#,广西南宁市,2018-01-15,03:59:54,

#,广西南宁市,2018-01-15,04:00:55,

文章：一个制片人的自白发表时间：2018-01-10, 04:07:49

展开↯

#⁶⁶¹

作者：广西南宁市

用一个div模拟成body，然后footer放这个模拟div外，然后margin-top负值把footer拉上去

#,广西南宁市,2017-05-31,17:49:13, 这些是CSS3特有的选择器，
A>B 表示选择A元素的所有子B元素。
与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。
另外：没有<的用法。
A+B表示HTML中紧随A的B元素。
nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一试就知道了。

#,广西南宁市,2017-05-31,17:51:09, text-align实现div水平垂直居中

<style>.parent {
  text-align:center;
  margin:0 auto;
  width:200px;
  height:200px;
  background:red;
}
.children {
  positiona;absolute;
  margin-top:75px;
  width:50px;
  height:50px;
  background: black;
  display:inline-block;/*使其父元素text-align生效*/
}</style><div class="parent">
  <div class="children"></div>
</div>

Run code

Cut to clipboard

#,广西南宁市,2018-01-12,16:53:39,
图片黑白css 使用CSS将图片转换成黑白(灰色、置灰) CSS3 Filter 去色

<style>
img{    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;}
	img:hover{-webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    
    filter: grayscale(0);
	filter: gray(0);
	}
</style>
<img src="VCG21gic16069628.jpg">

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2016-02-03, 16:31:50

展开↯

#⁶⁶²

作者：广西

手机宽度超过多行滚动

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-01-10, 04:08:37

展开↯

#⁶⁶³

作者：广西

葛优：我让你白刀子进，黄刀子出，我挑你屎包~ 我在让你白刀子进，绿刀子出，我扎你苦胆~ 我还让你白刀子进，还是白刀子出，我戳你脑浆子~

文章：一个制片人的自白发表时间：2018-01-10, 04:06:39

展开↯

#⁶⁶⁴

作者：广西南宁市

C:WINDOWS/system32/drivers/etc 目录下的 hosts

#,广西南宁市,2018-01-05,17:55:37,
a链接href执行js代码

<a href = "javascript:alert(22);">点我</a>

Run code

Cut to clipboard

去掉a链接点击

href="javascript:;"

Run code

Cut to clipboard

或者去掉href属性

#,广西南宁市,2018-01-09,11:06:21,

view-source:URL

Run code

Cut to clipboard

#,广西南宁市,2018-01-09,15:26:40,

nofollow有两种用法：
1.用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签：<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2015-12-18, 11:01:52

展开↯

#⁶⁶⁵

作者：广西南宁市

for循环最基础的知识做的九九乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box div{
				width: 80px;
				display: inline-block;
				background-color: gray;
			}
			#box div span{
				display: block;
				line-height: 30px;
				color: pink;
				background-color:black;
				margin-right: 2px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!--<div>
				<span> 1 X 1 = 1 </span>
				<span> 1 X 2 = 2 </span>
				<span> 1 X 3 = 3 </span>
				<span> 1 X 4 = 4 </span>
				<span> 1 X 5 = 5 </span>
				<span> 1 X 6 = 6 </span>
				<span> 1 X 7 = 7 </span>
				<span> 1 X 8 = 8 </span>
				<span> 1 X 9 = 9 </span>
				<span> 1 X 10 = 10 </span>
			</div>
			<div>
				<span> 2 X 2 = 4 </span>
				<span> 2 X 3 = 6 </span>
				<span> 2 X 4 = 8 </span>
				<span> 2 X 5 = 10 </span>
				<span> 2 X 6 = 12 </span>
				<span> 2 X 7 = 14 </span>
				<span> 2 X 8 = 16</span>
				<span> 2 X 9 = 18 </span>
				<span> 2 X 10 = 20 </span>
			</div>
			......-->
		</div>
		<script>
			var box = document.getElementById('box')
			
			var str = ''
			//i是列数j是乘号后面的数，是第几列，成号后面的数就是几开始
			for( var i = 1; i < 10; i ++){
				str += '<div>'
				//console.log(str)
				for( var j = i; j < 10; j ++){
					 var n = i + 'X' + j + '=' + i*j
					 str += '<span>' + n + '</span>'
				}
				str += '</div>'
			}
			box.innerHTML = str
		</script>
	</body>
</html>

Run code

Cut to clipboard

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			#box div{
				color: deeppink;
			}
			#box div span{
				padding: 5px;
				line-height: 20px;
				width: 70px;
				display: inline-block;
				border:1px solid peru;
				background-color: goldenrod;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!--<div>
				<span> 1 X 1 = 1 </span>
				<span> 1 X 2 = 2 </span>
				<span> 1 X 3 = 3 </span>
				<span> 1 X 4 = 4 </span>
				<span> 1 X 5 = 5 </span>
				<span> 1 X 6 = 6 </span>
				<span> 1 X 7 = 7 </span>
				<span> 1 X 8 = 8 </span>
				<span> 1 X 9 = 9 </span>
				<span> 1 X 10 = 10 </span>
			</div>
			<div>
				<span> 2 X 2 = 4 </span>
				<span> 2 X 3 = 6 </span>
				<span> 2 X 4 = 8 </span>
				<span> 2 X 5 = 10 </span>
				<span> 2 X 6 = 12 </span>
				<span> 2 X 7 = 14 </span>
				<span> 2 X 8 = 16</span>
				<span> 2 X 9 = 18 </span>
				<span> 2 X 10 = 20 </span>
			</div>
			......-->
		</div>
		<script>
			var box = document.getElementById('box')
			var str = ''
			//i为行，j为列
			for( var i = 1; i < 10; i ++){
				str += '<div>'
				//console.log(str)
				for( var j = 1; j <= i ; j ++ ){
					var n = j + 'X' + i + '=' + j*i
					str += '<span>' + n + '</span>'
				}
				str += '</div>'
			}
			box.innerHTML = str
		</script>
	</body>
</html>

Run code

Cut to clipboard

#,广西南宁市,2018-01-09,11:03:18,
九九乘法表（点击出现4种）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 80px;
				height: 30px;
				background: #ADFF2F;
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				color: #FF0000;
				position: absolute;
			}
		</style>
	</head>
	<body>
	</body>
	<script>
	    var stt=[one,two,three,four];
	    num =0;
	    document.onclick = function(){
	    	stt[num]();
	    	num++;
	    	num%=stt.length;
	    };
		    //第一种
		function one(){
			var str ='';
			
			for(var i=1;i<10;i++){
				for(var j=i;j<10;j++){
					str +='<div style="left:'+(i-1)*90+'px;top:'+(j-1)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}	
	
			//第二种               ////////好别扭
		function two(){
			var str ='';
			
			for(var i=9;i>0;i--){
				for(var j=i;j>0;j--){
					str +='<div style="left:'+(9-i)*90+'px;top:'+(i-j)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}
	
			//第三种
	    function three(){
			var str ='';
			
			for(var i=1;i<10;i++){
				for(var j=i;j<10;j++){
					str +='<div style="left:'+(9-i)*90+'px;top:'+(j-1)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}
			
			//第四种
		function four(){
			var str='';	
			for(var i=1;i<10;i++){
				for(var j=9;j>i-1;j--){
					str +='<div style="left:'+(i-1)*90+'px;top:'+(9-j)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}
		/*
		因为i<10是一个判断条件，则一直加的话最后数字只能到9
		因为j>i-1也是一个判断，而j最大值也是9
		所以到最后就会出现9 X 9
		*/
	</script>
</html>

Run code

Cut to clipboard

文章：纯CSS鼠标提示工具tooltip.css 发表时间：2018-01-09, 11:02:16

展开↯

Records:2788 35/147 «‹31 32 33 34 35 36 37 38 39 ›»