Festival del Bote del Dragón|Esperando el festival tradicional con tecnología moderna

News 2023-07-16 15:45:18 views: null

Tabla de contenido

introducción

1. Usa códigos para heredar la cultura del Dragon Boat Festival

1. Escribir pequeños programas o aplicaciones web relacionadas con el Dragon Boat Festival

2. Desarrolla aplicaciones o juegos temáticos del Festival del Bote del Dragón

2. La tecnología hace que la tradición sea más conveniente

1. Compras en línea y entrega de regalos

2. Compartir e interactuar en línea

Conclusión:

introducción

Han pasado 6 años desde que me uní a CSDN. El Dragon Boat Festival de este año es el sexto año. Antes, solo leía los artículos de los grandes y no participaba en él. Ahora me he unido lentamente a la familia de escritores y he ganado más o menos honores. También soy muy agradecido a CSDN.

 

Como uno de los festivales tradicionales más importantes de China, el Festival del Bote del Dragón representa la cosecha, la conmemoración y el reencuentro. Bajo la influencia de la tecnología moderna, nuestra vida también está estrechamente relacionada con la tecnología. Este artículo explorará cómo incorporar código en el festival tradicional de Dragon Boat Festival, utilizando el poder de la tecnología para transmitir cultura y mejorar la interacción.

1. Usa códigos para heredar la cultura del Dragon Boat Festival

1. Escribir pequeños programas o aplicaciones web relacionadas con el Dragon Boat Festival

Al escribir pequeños programas o aplicaciones web, podemos combinar los elementos culturales del Festival del Bote del Dragón con la tecnología para heredar y promover la cultura del Festival del Bote del Dragón de una manera innovadora. Por ejemplo, podemos crear un juego de preguntas interactivo sobre el Festival del Bote del Dragón, que permita a los usuarios aprender la historia y las costumbres tradicionales del Festival del Bote del Dragón respondiendo preguntas.

 

2. Desarrolla aplicaciones o juegos temáticos del Festival del Bote del Dragón

El desarrollo de aplicaciones o juegos temáticos del Dragon Boat Festival con códigos puede permitir a los usuarios experimentar el entretenimiento y la comodidad que brinda la tecnología mientras se familiarizan y disfrutan de las costumbres del Dragon Boat Festival. Por ejemplo, podemos diseñar un juego que simule carreras de botes de dragón agitando el teléfono móvil o desarrollar una aplicación de cocina virtual para hacer albóndigas de arroz, lo que permite a los usuarios experimentar la diversión de los bollos al vapor en el espacio virtual.

Aquí se escribe un juego de emparejamiento del Festival del Bote del Dragón. Cuando el código se reunió con el Dragon Boat Festival.

 Código CSS:

*{ margin:0; padding:0;}
#ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;}
#ul1 li{ list-style:none;}
 
body { text-align: center; background-color: #2A2A2A; color: aliceblue}
.box0{ width:70px; height:70px; background:url(../images/1.jpg) no-repeat; float:left;}
.box1{ width:70px; height:70px; background:url(../images/2.jpg) no-repeat; float:left;}
.box2{ width:70px; height:70px; background:url(../images/3.jpg) no-repeat; float:left;}
.box3{ width:70px; height:70px; background:url(../images/4.jpg) no-repeat; float:left;}
.box4{ width:70px; height:70px; background:url(../images/5.jpg) no-repeat; float:left;}
.box5{ width:70px; height:70px; background:url(../images/6.jpg) no-repeat; float:left;}

Código JS:

document.ontouchmove = function(ev){
 ev.preventDefault(); 
};
 
$(function(){
 var Game = {
 colNum : 7,
 wH : 70,
 timeBtn : true,
 dir : 0,
 dirThis : null,
 init : function(){
 this.oUl = $('#ul1');
 this.createMap();
  
 },
 createMap : function(){
 this.oUl.css({width : this.colNum*this.wH , height : this.colNum*this.wH});
 var numX = 0;
 var numY = 0;
  
 for(var i=0;i<Math.pow(this.colNum,2);i++){
 var oLi = $('<li>');
 oLi.attr('class','box'+ Math.floor(Math.random()*6));
  
 oLi.data({x : numX , y : numY});
  
 numX++;
  
 if( numX == this.colNum ){
  numX = 0;
  numY++;
 }
  
 this.oUl.append( oLi );
 }
  
 this.positionShow();
  
 this.removeShow();
  
 this.bindTouch();
  
 },
 positionShow : function(){
  
 this.aLi = this.oUl[0].getElementsByTagName('li');
  
 var arr = [];
 $(this.aLi).each(function(i,elem){
 arr.push( [ elem.offsetLeft , elem.offsetTop ] );
 });
 $(this.aLi).each(function(i,elem){
 $(elem).css({position : 'absolute',left : arr[i][0] , top : arr[i][1]});
  
 });
  
 this.arr = arr;
  
 },
 
  }
 }
 else{ //上下
  
  if(startY < data.clientY){ //↓
   
  if( $(startThis).data('y') != This.colNum-1 ){
   
  This.dir = 3;
   
  var index = $(startThis).data('x') + ($(startThis).data('y')+1)*This.colNum; 
   
  var downLi = $(This.oUl).find('li').eq(index);
   
  var prevThis = $(startThis).prev();
   
  $(startThis).insertAfter( downLi ); 
  downLi.insertAfter( prevThis );
   
  $(startThis).animate({top : This.arr[index][1]},300); 
  downLi.animate({top : This.arr[index-This.colNum][1]},300); 
   
  $(startThis).data('y',$(startThis).data('y')+1);
  downLi.data('y',downLi.data('y')-1);
   
  This.dirThis = downLi;
   
  }
   
  }
  else{ //↑
  
  if( $(startThis).data('y') != 0 ){
   
  This.dir = 4;
   
  var index = $(startThis).data('x') + ($(startThis).data('y')-1)*This.colNum; 
   
  var upLi = $(This.oUl).find('li').eq(index);
   
  var prevThis = $(startThis).prev();
   
  $(startThis).insertAfter( upLi ); 
  upLi.insertAfter( prevThis );
   
  $(startThis).animate({top : This.arr[index][1]},300); 
  upLi.animate({top : This.arr[index+This.colNum][1]},300); 
   
  $(startThis).data('y',$(startThis).data('y')-1);
  upLi.data('y',upLi.data('y')+1);
   
  This.dirThis = upLi;
   
  }
   
  }
  
 }
   
  This.removeShow();
 }
  
 return false;
  
 });
 },
 removeShow : function(){
  
 var arr = [];
 var This = this;
  
 function addArr(aLi){
  
 var prevLi = aLi[0];
 var iNum = 0;
  
 for(var i=0;i<aLi.length;i++){
  if( aLi[i].className == prevLi.className && i%7!=0 ){
  iNum++;
  }
  else{
   
  if(iNum >= 2){
  for(var j=0;j<=iNum;j++){
  arr.unshift( aLi[(i-1)-j] );
  }
   
  }
   
  iNum = 0;
  }
  prevLi = aLi[i]; 
 }
  
 if(iNum >= 2){
  for(var j=0;j<=iNum;j++){
  arr.unshift( aLi[(i-1)-j] );
  }
   
 }
  
 }
  
 addArr(this.aLi);
 addArr(this.xyChange(this.aLi));
  
 for(var i=0;i<arr.length;i++){
  
 for(var j=0;j<this.aLi.length;j++){
  if( arr[i] == this.aLi[j] ){
  this.aLi[j].bBtn = true;
  }
 }
 }
  
 var removeNum = 0;
 var removeY = [];
 var changeArr = [];
  
 for(var i=0;i<this.aLi.length;i++){
 if( this.aLi[i].bBtn ){
  removeNum++;
  removeY.push( this.aLi[i] );
 }
 }
  
 if(removeY.length){
 this.timeBtn = false;
 this.dir = 0;
 }
 else{
 this.toReset();
 return;
 }
  
 for(var i=0;i<removeY.length;i++){
 for(var j=0;j<this.arrY[ $(removeY[i]).data('x') ].length;j++ ){
   
  if( removeY[i] == this.arrY[ $(removeY[i]).data('x') ][j] ){
  this.arrY[ $(removeY[i]).data('x') ].iNum++;
  this.arrY[ $(removeY[i]).data('x') ].splice(j,1);
  this.arrY[ $(removeY[i]).data('x') ].unshift( this.oneLi( $(removeY[i]).data('x') , this.arrY[ $(removeY[i]).data('x') ].iNum ) );
   
  }
 }
 }
  
 for(var i=0;i<this.colNum;i++){
 changeArr = changeArr.concat( this.arrY[i] );
 }
  
 var c = this.xyChange( changeArr );
 var removeYnum = 0;
  
 for(var i=0;i<removeY.length;i++){
  
 $(removeY[i]).animate({opacity:0},function(){
  $(this).remove();
   

 case 2:
  
  var index = $(this.dirThis).data('x')-1 + $(this.dirThis).data('y')*this.colNum;
   
  var prevLi = $(this.oUl).find('li').eq(index);
   
  $(this.dirThis).insertBefore( prevLi ); 
  $(this.dirThis).animate({left : this.arr[index][0]},300); 
  prevLi.animate({left : this.arr[index+1][0]},300); 
   
  $(this.dirThis).data('x',$(this.dirThis).data('x')-1);
  prevLi.data('x',prevLi.data('x')+1);
  
 break;
 case 3:
  
  var index = $(this.dirThis).data('x') + ($(this.dirThis).data('y')+1)*this.colNum; 
   
  var downLi = $(this.oUl).find('li').eq(index);
   
  var prevThis = $(this.dirThis).prev();
   
  $(this.dirThis).insertAfter( downLi ); 
  downLi.insertAfter( prevThis );
   
  $(this.dirThis).animate({top : this.arr[index][1]},300); 
  downLi.animate({top : this.arr[index-this.colNum][1]},300); 
   
  $(this.dirThis).data('y',$(this.dirThis).data('y')+1);
  downLi.data('y',downLi.data('y')-1);
  
 break;
 case 4:
  
  var index = $(this.dirThis).data('x') + ($(this.dirThis).data('y')-1)*this.colNum; 
   
  var upLi = $(this.oUl).find('li').eq(index);
   
  var prevThis = $(this.dirThis).prev();
   
  $(this.dirThis).insertAfter( upLi ); 
  upLi.insertAfter( prevThis );
   
  $(this.dirThis).animate({top : this.arr[index][1]},300); 
  upLi.animate({top : this.arr[index+this.colNum][1]},300); 
   
  $(this.dirThis).data('y',$(this.dirThis).data('y')-1);
  upLi.data('y',upLi.data('y')+1);
  
 break;
 }
  
  
 },

  
 };

 
 Game.init();
  
});

Los códigos anteriores se dividen en CSS, JS, Img y códigos de página web, que he cargado en el paquete de códigos, aprenda por sí mismo.

 

2. La tecnología hace que la tradición sea más conveniente

1. Compras en línea y entrega de regalos

El Festival del Bote del Dragón es una ocasión importante para la entrega de regalos, y las compras en línea brindan a las personas una experiencia de compra más conveniente. Al optimizar la plataforma de comercio electrónico y el sistema de logística, podemos lograr una entrega rápida y sin problemas durante el Festival del Bote del Dragón, lo que facilita que las personas compren y envíen regalos del Festival del Bote del Dragón.

 

2. Compartir e interactuar en línea

Usando herramientas tecnológicas modernas como las redes sociales y las plataformas de videos cortos, podemos compartir nuestra experiencia en el Festival del Bote del Dragón con otros e interactuar con familiares y amigos. Al publicar fotos, videos o textos relacionados con el Festival del Bote del Dragón, podemos dar a conocer la cultura y la celebración del Festival del Bote del Dragón a más personas y, al mismo tiempo, acercarlos entre sí.

Aquí hemos diseñado una actividad de sorteo del Festival del Bote del Dragón.

 Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>抽奖</title>
	<style type="text/css">
		.qimo8{ overflow:hidden;}
		.qimo8 .qimo {/*width:99999999px;*/width:8000%;}
		.qimo8 .qimo div{ float:left;}
		.qimo8 .qimo ul{float:left;overflow:hidden; zoom:1; }
		.qimo8 .qimo ul li{float:left; list-style:none; font-size: 24px;margin: 0 1rem;}
	</style>
	<link rel="stylesheet" type="text/css" href="./css/styleCJ.css"/>
	<script src="JS/common.js"></script>
</head>
<body>
<div class="shanDeng" id="deng">
	<div id="luck"><!-- luck -->
		<table style="border-spacing:.08rem .03rem;">
			<tr>
				<td class="luck-unit luck-unit-0"><img src="./img/01.png"></td>
				<td class="luck-unit luck-unit-1"><img src="./img/02.png"></td>
				<td class="luck-unit luck-unit-2"><img src="./img/03.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-7"><img src="./img/05.png"></td>
				<td class="cjBtn" id="btn"></td>
				<td class="luck-unit luck-unit-3"><img src="./img/01.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-6"><img src="./img/02.png"></td>
				<td class="luck-unit luck-unit-5"><img src="./img/04.png"></td>
				<td class="luck-unit luck-unit-4"><img src="./img/03.png"></td>
			</tr>
		</table>
	</div><!-- luckEnd -->
</div>


<div class="rule">
	<p>抽奖活动规则</p>
	<p>1、单次加油满200元,可抽奖一次;</p>
	<p>2、各种奖券使用规则详见该奖券的使用说明;</p>
	<p>3、奖券请在有效期内使用或者分享给其他朋友,过期无效</p>
</div>

<div class="play">
	<span></span><div class="div">
	<div id="demo" class="qimo8">
		<div class="qimo">
			<div id="demo1">
				<ul>
					<li>某某某获得一等奖</li>
					<li>某某某获得四等奖</li>
					<li>某某某获得三等奖</li>
					<li>某某某获得二等奖</li>
					<li>某某某获得四等奖</li>
					<li>某某某获得三等奖</li>
					<li>某某某获得二等奖</li>
					<li>某某某获得三等奖</li>
				</ul>
			</div>
			<div id="demo2"></div>
		</div>
	</div>
</div>
</div>


	<script>
		var luck={
			index:0,	//当前转动到哪个位置，起点位置
			count:0,	//总共有多少个位置
			timer:0,	//setTimeout的ID，用clearTimeout清除
			speed:20,	//初始转动速度
			times:0,	//转动次数
			cycle:50,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
			prize:-1,	//中奖位置
			init:function(id){
				if ($("#"+id).find(".luck-unit").length>0) {
					$luck = $("#"+id);
					$units = $luck.find(".luck-unit");
					this.obj = $luck;
					this.count = $units.length;
					$luck.find(".luck-unit-"+this.index).addClass("active");
				};
			},

			
			roll:function(){
				var index = this.index;
				var count = this.count;
				var luck = this.obj;
				$(luck).find(".luck-unit-"+index).removeClass("active");
				index += 1;
				if (index>count-1) {
					index = 0;
				};
				$(luck).find(".luck-unit-"+index).addClass("active");
				this.index=index;
				return false;
			},
			stop:function(index){
				this.prize=index;
				return false;
			}
		};


		function roll(){
			luck.times += 1;
			luck.roll();
			if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
				clearTimeout(luck.timer);
				luck.prize=-1;
				luck.times=0;
				click=false;
			}else{
				if (luck.times<luck.cycle) {
					luck.speed -= 10;
				}else if(luck.times==luck.cycle) {
					var index = Math.random()*(luck.count)|0;
                    if(index>5){
                        index = 7;
					}else {
                        index = 5;
					}
                    luck.prize = index;//最终中奖位置
				}else{
					if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
						luck.speed += 110;
					}else{
						luck.speed += 20;
					}
				}
				if (luck.speed<40) {
					luck.speed=40;
				};

				luck.timer = setTimeout(roll,luck.speed);
			}
			return false;
		}


		var click=false;
		window.onload=function(){
			luck.init('luck');
			$("#btn").click(function(){
				/*//按下弹起效果
				$("#btn").addClass("cjBtnDom");
				setTimeout(function(){	
					$("#btn").removeClass("cjBtnDom");
				},200);*/

				
				if(click) {
					return false;
				}
				else{
					luck.speed=100;
					roll();
					click=true;
					return false;
				}

			});
		};
		//播报
        var demo = document.getElementById("demo");
        var demo1 = document.getElementById("demo1");
        var demo2 = document.getElementById("demo2");
        demo2.innerHTML=document.getElementById("demo1").innerHTML;
        function Marquee(){
            if(demo.scrollLeft-demo2.offsetWidth>=0){
                demo.scrollLeft-=demo1.offsetWidth;
            }
            else{
                demo.scrollLeft++;
            }
        }
        setInterval(Marquee,10);

	</script>
</body>
</html>

Código CSS:


/*公共样式*/
body{
    background-color: #F7F7F7;
    margin: 0;
    padding: 0;
}

.banxin {
    width: 6.9rem;
    margin: 0 auto;
}
.header {
    background: rgb(68, 181, 73);
    height: 1rem;
    width: 100%;
    color: #F7F7F7;
    font-size: 0.34rem;
    line-height: 1rem;
}
.header a {
    display: inline-block;
    width: 0.2rem;
    height: 0.34rem;
    line-height: 0.34rem;
    margin-bottom: -0.03rem;
    margin-right: 0.25rem;
    background: url("../img/sprite.png") no-repeat -3.38rem 0;
    background-size: 3.98rem 1.16rem;
}
.header span {
    line-height: 0.34rem;
}
.w{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
}
*{
    box-sizing: border-box;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin:0;
    font-family: "Microsoft Yahei";
    padding:0;
    /*border:0;
    */
    /*outline:0;
	*/
    /*font-size:100%;
	vertical-align:baseline;
	background:transparent;
	*/
}
h1,h2,h3,h4,h5,h6,em,i {
    font-weight:100;
    font-style:normal;
}
ul,ol,li {
    list-style-type:none;
}
a {
    color:#666;
    text-decoration:none;
    outline:0;
}
a:hover {
    text-decoration:none;
}
.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom: 1;/*兼容ie6,7,8*/
}
.fl{
    float: left;
}
.fr{
    float: right;
}

 Código JS:



/*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/
//(function () {
//var html = document.getElementsByTagName('html')[0];
    /*取到屏幕的宽度*/
//    var width = window.innerWidth;
    /* 640 100  320 50 */
//    var fontSize = 100/750*width;
    /*设置fontsize*/
//    html.style.fontSize = fontSize +'px';
//调整页面尺寸大小
//    window.onresize = function(){
//        var html = document.getElementsByTagName('html')[0];
        /*取到屏幕的宽度*/
//        var width = window.innerWidth;
        /* 640 100  320 50 */
//       var fontSize = 100/750 * width;
        /*设置fontsize*/
//       html.style.fontSize = fontSize +'px';
//    }
//})()

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 Los códigos anteriores se dividen en CSS, JS, Img y códigos de página web, que he cargado en el paquete de códigos, aprenda por sí mismo.

 Nota: Para el js citado anteriormente, vaya a la biblioteca js para seleccionar la referencia.

Conclusión:

Como festival tradicional, el Dragon Boat Festival se integra orgánicamente con la tecnología moderna. Usando código y tecnología, podemos crear experiencias más divertidas, interactivas y convenientes para el Festival del Bote del Dragón. Trabajemos juntos para transmitir la cultura tradicional del Dragon Boat Festival y difundirla a más personas con el poder de la tecnología. Que el Dragon Boat Festival nos traiga reencuentro y felicidad, y al mismo tiempo nos ayude a avanzar hacia un futuro tecnológico de la cultura.

Supongo que te gusta

Origin blog.csdn.net/qq_22903531/article/details/131327673
Recomendado
Clasificación
Diario
Más
2024-06-02(0)
2024-06-01(2)
2024-05-31(0)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)
2024-05-25(0)
2024-05-24(13)

Code World

© 2018 codetd.com